vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡

知识点：

事件流

当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点会收到该事件，这个传播的过程叫做DOM事件流

事件又分为冒泡事件捕获事件

冒泡事件

微软提出事件由子元素到父元素的过程称之为冒泡金鱼吐泡泡

捕获事件

网景提出事件由父元素到子元素的过程称之为捕获鹰抓老鼠

当两者同时出现时先捕获后冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 180px;height: 180px;background:gold;margin: 100px auto;padding: 30px;border-radius: 50%;}.outer .center{width: 130px;height: 130px;padding: 30px;background:pink;border-radius: 50%;}.outer .center .inner{width: 130px;height: 130px;background:cyan;border-radius: 50%;}</style>
</head>
<body><div id="app"><!-- .self会阻止center向outer传递事件（冒泡） --><div class="outer" @click.self="outer"><!-- center没有添加self属性，因此inner会冒泡到center --><div class="center" @click="center"><div class="inner" @click.self="inner"></div></div></div></div><script src="js/vue.js"></script><script>var vue = new Vue({el:"#app",methods:{outer() {console.log("外层")},center() {console.log("中间")},inner(event) {console.log("内层")}}})</script>
</body>
</html>

vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡相关推荐

vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...

vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡

vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡相关推荐

最新文章

热门文章