@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)

<div id="app"><div v-on:click="dodo"><button v-on:click="doThis">阻止单击事件继续传播</button></div></div><script>var app = new Vue({el: "#app",data: {name: "Vue.js"},methods: {doThis: function () {alert("dothis");},dodo: function () {alert("dodo");}}});</script>

这样的话，会先弹出dothis 在弹出dodo,
如果用@click.stop的话

 <div id="app"><div v-on:click="dodo"><button v-on:click.stop="doThis">阻止单击事件继续传播</button></div></div><script>var app = new Vue({el: "#app",data: {name: "Vue.js"},methods: {doThis: function () {alert("dothis");},dodo: function () {alert("dodo");}}});</script>

这样的话，只会弹出dothis

@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)相关推荐

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
html鼠标的点击事件失效,为什么鼠标悬停事件不起作用呢？
源自:2-3 鼠标悬停事件添加为什么鼠标悬停事件不起作用呢? var area = document.getElementById('moocBox'); var con1 = document.g ...
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
【Vue教程三】点击事件、表单输入事件、键盘事件
一.点击事件: 1.可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 'v-on:click' 简写成 '@click' <body><di ...
vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法
最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的.经过一番研究才发现是vue事件点击穿透引起 ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...
JS中如何阻止事件的传播
一个事件发生后,会在子元素和父元素之间传播(propagation).这种传播分成三个阶段.这种三阶段的传播模型,使得同一个事件会在多个节点上触发. 第一阶段:从window对象传导到目标节点(上层传 ...

@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)

@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)相关推荐

最新文章

热门文章