感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div id="example-1">
<div v-on:click.self="alertMessage3"><!--只当事件在该元素本身 (比如不是子元素) 触发时触发回调-->
<div v-on:click="alertMessage2($event)">
<button v-on:click="counter += 1">增加 1</button>
<button>事件冒泡</button>
<button v-on:click="alertMessage">事件冒泡</button>
<button v-on:click.stop="alertMessage">阻止事件冒泡</button>
<button v-on:click.stop.prevent="alertMessage">修饰符可以串联</button>
</div>
<button v-on:click.once="alertMessage">事件只触发一次</button>
<button v-on:click.self.prevent="alertMessage">只会阻止元素上的点击。</button>
<!--没有阻止点击啊-->
<p>这个按钮被点击了 {{ counter }} 次。</p>
</body>
</html>
xxxxxxxxxx
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
},
methods:{
alertMessage:function(){
//return false//return false 了怎么还冒泡?
alert("aaa")
//如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
//我让第二层处理事件了呀,怎么还往第三层传,处理事件怎么搞?
alertMessage2:function(event){
//event.stopPropagation();//用这个可以阻止
//.stopPropagation() 不再派发事件。
//终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
alert("bbb")
alertMessage3:function(){
alert("ccc")
}
})
输入 CSS 代码……