事件对象(event)、事件冒泡、默认行为
2017-01-20 10:02
113 查看
1.点击事件的event
(事件对象)
<div id="box"> <input type="button" value="按钮" @click="show($event)"> </div>
var vm = new Vue({ el:'#box', methods:{ show:function(event){ console.log(event); alert(event.clientX); //这里边就是原生JS } } });
调用函数的时候传入一个
$event参数进去,函数内部可以通过这个
event参数,获取鼠标点击的
X点和
Y点。
2.事件冒泡
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', methods:{ show:function(){ alert(1); }, show2:function(){ alert(2); } } }); } </script> </head> <body> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click="show()"> </div> </div> </body> </html>
点击“按钮”,会依次弹出
1,
2。说明先执行了
show()方法,然后执行了
show2()方法。这就是“事件冒泡”。
阻止冒泡
利用我们上面讲过的event对象。
在调用函数时传入:
<div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click="show($event)"> </div> </div>
然后在
show()方法里可以组织冒泡:
show:function(event){ alert(1); event.cancelBubble = true; },
这样
show2()就不会执行了。
利用vue的方法阻止冒泡
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', methods:{ show:function(event){ alert(1); //event.cancelBubble = true; }, show2:function(){ alert(2); } } }); } </script> </head> <body> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click.stop="show()"> </div> </div> </body> </html>
注意此时我们没有
event对象,而是在给HTML元素绑定click事件的时候,改为
@click.stop="show()"。
3.默认行为
contextmenu右键菜单<div id="box"> <input type="button" value="按钮" @contextmenu="show()"> </div>
点击右键也会执行
show()方法,但是执行完之后会打开右键菜单的默认行为。
如何阻止这种默认行为?
@contextmenu.prevent="show()"
相关文章推荐
- 第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡
- 事件对象(event)、事件冒泡、默认行为
- vue事件对象、冒泡、阻止默认行为
- vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
- Vue2学习笔记:事件对象、事件冒泡、默认行为
- 三、event 和 event.target(目标元素) 和短路运算以及 组织默认行为、阻止冒泡、事件委托
- Jquery——Day3(事件对象+事件冒泡+默认行为阻止)
- Vue2学习笔记:事件对象、事件冒泡、默认行为
- 详解vue事件对象、冒泡、阻止默认行为
- vue常用事件之v-on:click 以及事件对象,事件冒泡,事件默认行为
- vue事件对象,冒泡,阻止默认行为
- jQuery中event.stopPropagation()阻止事件冒泡及event.preventDefault()阻止默认行为
- 阻止事件冒泡和浏览器默认行为
- flex中event.preventDefault()方法取消事件的默认行为
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- event事件对象 兼容写法:var oEvent=ev||event; 和取消事件冒泡
- event.preventDefault() 取消事件的默认行为。
- JS取消事件的默认行为和取消冒泡
- jQuery 中的事件冒泡和阻止默认行为