027——VUE中事件修饰符：stop prevent self capture

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修饰符：self capture stop prevent的使用</title><script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo"><!--第一种情况--><!--<div @click="divEven" style="border:1px #188eee solid;">--><!--<a href="www.baidu.com" @click="aEven">百度链接</a>--><!--</div>--><!--stop的使用：阻止事件冒泡的发生--><!--<div @click="divEven" style="border:1px #188eee solid;">--><!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>--><!--</div>--><!--prevent的使用：阻止默认事件的发生--><!--<div @click="divEven" style="border:1px #188eee solid;">--><!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>--><!--</div>--><!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行--><!--<div @click.self="divEven" style="border:1px #188eee solid;">--><!--<a href="www.baidu.com" @click.prevent="aEven">百度链接</a>--><!--</div>--><!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件--><div @click.capture="divEven" style="border:1px #188eee solid;"><a href="www.baidu.com" @click.prevent="aEven">百度链接</a></div>
</div>
<script>new Vue({el:"#demo",methods:{divEven(){alert("我是div的事件");},aEven(){alert("我是a链接事件");}}});
</script>
</body>
</html>

027——VUE中事件修饰符：stop prevent self capture相关推荐

026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
详细解析vue中的修饰符
1.表单输入框input中的修饰符 .lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新.不加lazy则是在keyup就更新,如下: <input v-mode ...
用vue的事件修饰符阻止冒泡
用mousemove事件举例 1.传统做法: 定义一个阻止冒泡的函数stop,形参为事件e,执行e.stopPropagation(), 在标签上添加v-on:mousemove="stop ...

027——VUE中事件修饰符：stop prevent self capture

027——VUE中事件修饰符：stop prevent self capture相关推荐

最新文章

热门文章