vuejs-阻止事件冒泡与默认行为
来源:互联网 发布:kk视频录制软件 编辑:程序博客网 时间:2024/05/16 05:18
阻止事件冒泡
<template> <div> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click="show()"> </div> </div> </div></template>
javascript
export default { data: function() { return { number: 1 } }, methods: { show: function() { alert(1); }, show2: function() { alert(2); } }, }
在上面的代码中,input元素绑定了一个click事件,点击它将调用show()方法
同时其父节点也绑定了一个click事件,点击它将调用show2()方法
此时如果点击input按钮,将引发事件冒泡,show()和show2()方法会被依次调用
若要阻止事件冒泡,只需将input标签中的@click 改成@click.stop 即可
阻止默认行为
<template> <div> <div id="box"> <input type="button" value="按钮" @contextmenu="show()"> </div> </div></template>
JavaScript
export default { data: function() { return { number: 1 } }, methods: { show: function() { alert(1); } }, }
在上面的代码中,input元素绑定了一个contextmenu事件,单击鼠标右键会触发该事件,并调用show()方法
此时浏览器窗口不仅会出现alert弹框,还会出现浏览器默认的菜单选项
若要阻止默认行为,只需将@contextmenu 改成@contextmenu.prevent 即可
阅读全文
0 0
- vuejs-阻止事件冒泡与默认行为
- vuejs-阻止事件冒泡与默认行为
- vuejs-阻止事件冒泡与默认行为
- 阻止事件冒泡\阻止默认行为
- javascript 阻止事件冒泡 与 浏览器的默认行为
- 阻止默认事件行为和事件冒泡
- 事件冒泡。阻止事件冒泡 |阻止元素的默认行为
- 阻止事件冒泡和浏览器默认行为
- 阻止事件冒泡及浏览器默认行为
- 阻止事件冒泡和默认行为
- jQuery 阻止事件冒泡和默认行为
- JQuery:事件冒泡和阻止默认行为
- 事件冒泡和默认行为阻止
- vue事件对象、冒泡、阻止默认行为
- vue事件对象,冒泡,阻止默认行为
- jQuery事件---阻止冒泡和默认行为
- vue--阻止冒泡、默认行为、键盘事件
- 如何阻止事件冒泡和默认行为?
- 素数距离问题
- 每次每次请求都是项目初始地址加访问地址
- Cocos2d-js场景切换资源释放策略
- TP5.0 请求和响应
- 变量赋值问题
- vuejs-阻止事件冒泡与默认行为
- <Unity>Shader的内置值
- 基于spring3和mongodb3的spring-data-mongodb框架集成
- 配置NTP服务器
- This
- Windows驱动程序运行时函数的调用
- 点击空白区域关闭软键盘
- awstats + tomcat + windows
- Docker学习总结(24)——在Docker中监视Java应用程序的5种方法