vue绑定的点击事件阻止冒泡的实例,vue绑定冒泡实例

图片 1

首先我们来看原生JS取消事件冒泡方法:

vue绑定的点击事件阻止冒泡的实例,vue绑定冒泡实例

当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除、修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决:

首先我们来区分事件冒泡、事件捕获是什么

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 6.0: div -> body ->
html -> document

Mozilla 1.0: div -> body
-> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document
对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  <div class="tableContent" v-for="(items,index) in dataList" v-on:click="changeBacks(items)" :class="{tableContentHover:items.changeBack}"> 
   <ul> 
    <li><label :class="{labelChange:items.changeBack}">√</label><label v-html="items.name"></label> </li> 
    <li><label v-html="items.sex"></label></li> 
    <li><label v-html="items.tel"></label></li> 
    <li> 
     <label v-html="items.age" v-if="items.age<=20" v-bind:class="'black'"></label> 
     <label v-html="items.age" v-else-if="items.age<=40" v-bind:class="'green'"></label> 
     <label v-html="items.age" v-else-if="items.age<=60" v-bind:class="'blue'"></label> 
     <label v-html="items.age" v-else-if="items.age<=80" v-bind:class="'purple'"></label> 
     <label v-html="items.age" v-else v-bind:class="'red'"></label> 
    </li> 
    <li><label v-html="items.profession"></label></li> 
    <li><button v-on:click.stop="deleteThis(index)">删除</button></li> 
   </ul> 
  </div> 

这个时候在button的点击事件加上.stop,就可以解决以上问题。

以上这篇vue绑定的点击事件阻止冒泡的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的…

一、默认事件

stop阻止冒泡

什么是事件冒泡?

e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器

何为默认事件?比如 a会跳转页面,submit 会提交表单等。

prevent取消默认行为,比如超链接不会跳转等。

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡,如果属性浏览器原理的同学就知道,页面是由文档流,当我们在一个时间触发的时候,这个事件就像这个气泡一样,从dom树的底层,一层一层的往上面传递,一直传递到dom的根节点,如果子元素和父级元素触发的是相同事件的时候,当子元素被触发的时候父元素也会被触发冒泡机制,这就是冒泡的基本原理。

原生JS阻止默认事件方法:

  1. 普通js方法

 capture监听事件

在不同的内核浏览器中,冒泡是不一样的

e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器

e.preventDefault()函数。

使用不同的组合可以形成不同的事件链

IE11: div = body = html = document

而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元素:

a href="" onclick="stopDef(event)"百度/afunction stopDef(e){ e.preventDefault();}

图片 2

在其他内核中:div = body =html = window

//HTMLp @click="getEventTar($event)"Test/p//JSgetEventTar(el){console.log(el.target); //pTest/p,这里就相当于通过原生JS获取DOM元素而后可以对其进行一些操作}
  1. Vue.js方法

 

注意:在JavaScript中,并非所有的事件都可以冒泡,像:blur、unload、load等事件就不能冒泡

vue.js取消冒泡事件

.prevent是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue阻止事件冒泡</title>
    <script src="./vue.js" charset="utf-8"></script>
</head>

<body>
<div id="app" @click.capture="one">
    one
    <div @click.stop="two">
        two
        <div @click.stop="three">
            three
        </div>
    </div>

    <a href="http://www.zhihu.com" @click="one">知乎</a>
    <br/>
    <a href="http://www.zhihu.com" @click.prevent="one">知乎</a>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        methods: {
            one: function () {
                alert("one")
            },
            two: function () {
                alert("two")
            },
            three: function () {
                alert("three")
            }
        }
    })
</script>

</html>

示例代码:Html

//只需将click改成click.stopp @click.stop="getEventTar($event)"Test/p
div  a href="" @click.prevent="vueStopDef()"百度/a/divwindow.onload = function(){ new Vue({ el:"#app", methods:{ vueStopDef(){ console.log("vue.js通过 .prevent 阻止默认事件") } } });}

 

div  div  div  我是子元素 /div 我是父级元素 /div /div

vue.js阻止默认事件

二、冒泡事件

css

//只需将click改成click.preventp @click.prevent="getEventTar($event)"Test/p

何为事件冒泡?执行下段代码:

#app{ width: 500px; height: 500px; margin: 200px auto; background-color: #f5f5f5; border:2px solid #dddddd; } #father{ width: 400px; height: 400px; background-color: rgb(168, 125, 125); text-align: center; color:red; } #child{ width: 200px; height: 200px; background-color: #fff; color:blue; }
!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"meta "X-UA-Compatible" content="ie=edge"titleDocument/titlestyle.div1 {width: 500px;height: 500px;border: 1px solid black;}.div2 {width: 400px;height: 400px;border: 1px solid black;}.div3 {width: 300px;height: 300px;border: 1px solid black;}.div4 {width: 200px;height: 200px;border: 1px solid black;}.div5 {width: 100px;height: 100px;border: 1px solid black;}/stylescript src="../js/vue.js"/scriptscriptfunction fun01() {console.log("点击了div1");};function fun02() {console.log("点击了div2");};function fun03() {console.log("点击了div3");};function fun04() {console.log("点击了div4");};function fun05() {console.log("点击了div5");};/script/headbodydiv onclick="fun01()"div onclick="fun02()"div onclick="fun03()"div onclick="fun04()"div onclick="fun05()"div05 /divdiv04 /divdiv03 /divdiv02 /divdiv01 /div/body/html

js

当点击div05时,同时按顺序触发
div05、div04、div03、div02、div01;当点击div03的时候,同时按顺序出发div03、div02、div01等。从内层div一层一层触发外层div事件,这种现象就是事件冒泡。

 var father = document.getElementById('father');var child = document.getElementById('child');father.addEventListener("click", function () { console.log('我是父级元素')}, false)child.addEventListener("click", function () { console.log('我是子集元素')}, false)
  1. 普通 js 方法

当我点击子元素时,控制台打印如下图:

e.stopPropagation()。上述代码中,在定义fun05()改成fun05(e),同时在方法中加入e.stopPropagation()。在调用是
onclick=“fun05(event)”。当点击div05时,不会冒泡触发外层事件。

当我点击父元素时:控制台打印出来如下图:

  1. vue.js方法

可以看到,当我在点击子元素时,父元素绑定的点击事件也被触发了。那么我们如何阻止这种事件传递呢?

.stop是vue 的内置修饰符 调用了
e.stopPropagation()。阻止冒泡事件发生。下段代码中div5和div3出发点击事件时使用
.stop ,阻止冒泡事件发生。当点击div05 活着div03时,不会触发冒泡事件。

如何阻止事件冒泡

div @click="fun01" div @click="fun02" div @click.stop="fun03" div @click="fun04" div @click.stop="fun05" div05 /div div04 /div div03 /div div02 /div div01/divwindow.onload = function (){ new Vue({ el:"#app", methods:{ fun01(){ console.log("点击了div1"); }, fun02(){ console.log("点击了div2"); }, fun03(){ console.log("点击了div3"); }, fun04(){ console.log("点击了div4"); }, fun05(){ console.log("点击了div5"); } } });}

废话少说,直接上代码

但是,还是有点问题,上段代码运行后,因为对div5
和div3阻止了冒泡事件。但是,当点击div4
的时候,div4发生冒泡事件,同时出发了div3的点击事件(后面的被div阻止了)。也就是说,即使自己本身使用.stop阻止冒泡事件(不去触发外层事件),但是自身还是会被其它(内层事件)触发。这个时候,就需要
.self。

js

.self是vue 的内置修饰符 对于所指定的元素
只有当前元素本身可以触发事件,修饰符可以连写。即,将上段代码div3绑定事件改为

var father = document.getElementById('father');var child = document.getElementById('child');father.addEventListener("click", function () { if(event  event.stopPropagation){ event.stopPropagation() // 非IE浏览器 }else{ event.cancelBubble = true; //IE浏览器 } console.log('我是父级元素')}, false)child.addEventListener("click", function () { if (event  event.stopPropagation) { event.stopPropagation() // 非IE浏览器 } else { event.cancelBubble = true; //IE浏览器 } console.log('我是子集元素')}, false)
div @click.stop.self="fun03"

在W3C中,规定DOM标准通过调用event对象的stopPropagation()方法即可阻止冒泡型事件的进一步传递。

此时,能出发 div3 的点击事件只有在点击div3时这一种情况。

那么在vue中我们如何使用呢?

我们可以用.stop修饰符绑定在子元素上面,阻止其向父元素冒泡,从而达到不会触发冒泡事件

!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta "X-UA-Compatible" content="ie=edge" titleDocument/title/headstyle #app{ width: 500px; height: 500px; margin: 200px auto; background-color: #f5f5f5; border:2px solid #dddddd; } .father{ width: 400px; height: 400px; background-color: rgb(168, 125, 125); text-align: center; color:red; } .child{ width: 200px; height: 200px; background-color: #fff; color:blue; }/stylescript src=""/scriptbodydiv  div @click="clickFather" div @click.stop="clickChild" 我是子元素 /div 我是父级元素 /div/divscriptvar app = new Vue({ el:"#app", data:{ }, methods:{ clickFather(){ console.log('我是父级元素') }, clickChild(){ console.log('我是子元素') } }})/script/body/html

点击子元素打印出来日志

当然,事件冒泡是浏览器的默认行为,之所以这样设计,是有原因的,因为有时候事件冒泡可以提供很多的便利,但是使用不当就会造成很多不必要的bug。

总结:

1.事件冒泡的基本原理

2.原生js和vue中分别如何阻止事件冒泡

本文首发微信公众号:码客小栈

发表评论

电子邮件地址不会被公开。 必填项已用*标注