冒泡和捕获

  • 冒泡: 事件从内向外,从下向上执行 (默认行为)
  • 捕获: 事件从外向内,从上向下执行

vue之capture 捕获事件

capture.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>capture</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

  <style type="text/css">

    div {

      width: 400px;

    }

    .pinkBorder {

      border: 1px solid;

      border-color: blue;

    }

  </style>

</head>

<body>

  <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1

  但因为id1,id2配置了.capture, 所以id1,id2这两个变成了捕获事件, 优先触发,

 于是先执行id1,id2捕获, 再执行id4,id3冒泡, 最终按序弹出id1,id2,id4,id3 -->

  <div id="app">

    <div id="id1" class='pinkBorder' v-on:click.capture="doit">

      id1

      <div id="id2" class='pinkBorder' v-on:click.capture="doit">

        id2

        <div id="id3" class='pinkBorder' v-on:click="doit">

          id3

          <div id="id4" class='pinkBorder' v-on:click="doit">

            id4(点我最终按序弹出id1,id2,id4,id3)

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

<script>

  var app = new Vue({

    el: "#app",

    data: {

      id: ''

    },

    methods: {

      doit: function () {

        this.id = event.currentTarget.id;

        alert(this.id)

      }

    }

  })

  // vm.greet();

</script>

</html>

vue之self 自我事件

self.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>self</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

  <style type="text/css">

    div {

      width: 400px;

    }

    .pinkBorder {

      border: 1px solid;

      border-color: green;

    }

  </style>

</head>

<body>

  <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1

但因为id2配置了.self,检测到不是自身,所以冒泡过程会跳过id2,最终按序弹出id4,id3,id1 -->

  <div id="content">

    <div id="id1" class='pinkBorder' v-on:click="doit">

      id1

      <div id="id2" class='pinkBorder' v-on:click.self="doit">

        id2

        <div id="id3" class='pinkBorder' v-on:click="doit">

          id3

          <div id="id4" class='pinkBorder' v-on:click="doit">

            id4(点我按序弹出id4,id3,id1)

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

<script>

  var content = new Vue({

    el: "#content",

    data: {

      id: ''

    },

    methods: {

      doit: function () {

        this.id = event.currentTarget.id;

        alert(this.id)

      }

    }

  })

  // vm.greet();

</script>

</html>

vue之stop 阻止事件

self.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>stop</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

  <style type="text/css">

    div {

      width: 400px;

    }

    .pinkBorder {

      border: 1px solid;

      border-color: green;

    }

  </style>

</head>

<body>

    <!-- https://cn.vuejs.org/v2/guide/events.html#事件修饰符 -->

  <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1

但因为id2配置了.stop,所以冒泡事件在id2之后终止,最终按序弹出id4,id3,id2 -->

  <div id="content">

    <div id="id1" class='pinkBorder' v-on:click="doit">

      id1

      <div id="id2" class='pinkBorder' v-on:click.stop="doit">

        id2 (v-on:click.stop)

        <div id="id3" class='pinkBorder' v-on:click="doit">

          id3

          <div id="id4" class='pinkBorder' v-on:click="doit">

            id4(点我按序弹出id4,id3,id2 )

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

<script>

  var content = new Vue({

    el: "#content",

    data: {

      id: ''

    },

    methods: {

      doit: function () {

        this.id = event.currentTarget.id;

        alert(this.id)

      }

    }

  })

  // vm.greet();

</script>

</html>

参考

js之事件冒泡和事件捕获详细介绍==>https://www.jb51.net/article/42492.htm

js event 冒泡和捕获事件详细介绍【转】的更多相关文章

  1. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js时间冒泡，阻止事件冒泡

    首先解释一下事件冒泡神什么, 在js中,假如在div中嵌套一个div 如 <style type="text/css"> #box1{width:500px;heigh ...

  5. js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  6. javaScript系列：js中获取时间new Date()详细介绍

    var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...

  7. 电子表格控件Spreadsheet 对象方法事件详细介绍

    1.ActiveCell:返回代表活动单元格的Range只读对象.2.ActiveSheet:返回代表活动工作表的WorkSheet只读对象.3.ActiveWindow:返回表示当前窗口的Windo ...

  8. js中获取时间new Date()详细介绍

    var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...

  9. js 获取时间 new Date()详细介绍

    javaScript系列:js中获取时间new Date()详细介绍 (2012-03-31 09:54:25) 转载▼ 标签: js时间 new date() 字符类型 转换 分类: study-j ...

随机推荐

  1. chrome启用flash不询问

    69版本之后 打开 chrome://flags/#enable-ephemeral-flash-permission 把它从Default改为Disabled 重新打开Chrome,进入 chrom ...

  2. PAT L2-021 点赞狂魔

    https://pintia.cn/problem-sets/994805046380707840/problems/994805058485469184 微博上有个“点赞”功能,你可以为你喜欢的博文 ...

  3. #Leetcode# 788. Rotated Digits

    https://leetcode.com/problems/rotated-digits/ X is a good number if after rotating each digit indivi ...

  4. JS创建事件的三种方式（实例）

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick=&qu ...

  5. @Autowired的使用：推荐对构造函数进行注释

    在编写代码的时候,使用@Autowired注解是,发现IDE报的一个警告,如下: Spring Team recommends "Always use constructor based d ...

  6. [转帖]从 2G 到 5G，手机上网话语权的三次改变

    从 2G 到 5G,手机上网话语权的三次改变 美国第一大电信运营商 Verizon 公司的 CEO Hans Vestberg 手持一部 iPad,屏幕上显示俯瞰地面的飞行地图.400 多公里外的洛杉 ...

  7. pandas重新索引

    #重新索引会更改DataFrame的行标签和列标签.重新索引意味着符合数据以匹配特定轴上的一组给定的标签. #可以通过索引来实现多个操作 - #重新排序现有数据以匹配一组新的标签. #在没有标签数据的 ...

  8. 将ubuntu14.04 从mysql从5.5删除之后安装5.7遇到的一些问题(本篇不讨论热升级)

    五一放假实在无聊 继续玩弄新的服务器.发现有台mysql版本实在有点老,估计是akiho直接使用 apt-get install mysql-server ,然后又没有更新到最新的源,然后无脑安装了5 ...

  9. python自动化运维笔记3 —— dns处理模块dnspython

    1.3 DNS处理模块 dnspython是python实现的一个DNS工具包,它支持几乎所有的记录类型,可以用于查询.传输并动态更新ZONE信息,同时支持TSIG(事物签名)验证消息和EDNS0(扩 ...

  10. codeforces471B

    MUH and Important Things CodeForces - 471B It's time polar bears Menshykov and Uslada from the zoo o ...