<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{}, methods:{ show:function(ev,b){ alert(ev.clientX); alert(b); } show2:function(){ alert(2); } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮" @click="show($event,12)"> <input type="button" value="按钮" @click="show()"> <!-- v-on:click="show()"简写 --> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(ev){ alert(1); ev.cancelBubble=true;//阻止冒泡 }, show2:function(){ alert(2); } } }); }; </script> </head> <body> <div id="box"> <div @click="show2()"> //冒泡 <input type="button" value="按钮" @click="show($event)"> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(){ alert(1); }, show2:function(){ alert(2); } } }); }; </script> </head> <body> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click.stop="show()"> 简写方式，阻止冒泡， </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(ev){ alert(1); ev.preventDefault();//阻止右键菜单出来 } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮" @contextmenu="show($event)"> //contextmenu右键点击 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(){ alert(1); } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮" @contextmenu.prevent="show()"> //阻止右键的默认行为 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(ev){ alert(ev.keyCode); if(ev.keyCode==13){ alert('您按回车了'); } } show1:function(){ alert('您按回车了'); } show2:function(){ alert('您按回车了'); } show3:function(){ alert(1); } } }); }; </script> </head> <body> <div id="box"> <input type="text" @keydown="show"> <input type="text" @keydown="show($event)"> <input type="text" @keyup="show($event)"> <input type="text" @keyup.13="show1()"> <input type="text" @keyup.enter="show2()"> <input type="text" @keyup.left="show3()"> <input type="text" @keyup.up="show3()"> </div> </body> </html>