冒泡和捕获

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

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. How To Install MySQL on Ubuntu 16.04

    https://help.ubuntu.com/lts/serverguide/mysql.html http://www.cnblogs.com/wuhou/archive/2008/09/28/1 ...

  2. Java7和8在虚拟机上的差异：Perm Generation vs. Metaspace

  3. shell 学习笔记二

    一.break命令 break命令允许跳出所有循环(终止执行后面的所有循环). 下面的例子中,脚本进入死循环直至用户输入数字大于5.要跳出这个循环,返回到shell提示符下,就要使用break命令. ...

  4. python的数据相关框架

    ipython 多种编程语言之间进行交互计算的命令行shell graphlab greate 快速构建大型高性能数据产品 pandas 数据分析 pulp 线性编程模型 matplotlib sci ...

  5. Ubuntu 16.04安装Maven

    此篇为http://www.cnblogs.com/EasonJim/p/7139275.html的分支页. 前提:必须正确安装JDK. 一.通过二进制包(tar.gz)安装 下载: 进入下载列表:h ...

  6. Rob Pike 编程五原则

    Rob Pike's 5 Rules of Programming Rule 1: You can't tell where a program is going to spend its time. ...

  7. BZOJ4377[POI2015]Kurs szybkiego czytania——数学思维题

    题目描述 给定n,a,b,p,其中n,a互质.定义一个长度为n的01串c[0..n-1],其中c[i]==0当且仅当(ai+b) mod n < p.给定一个长为m的小01串,求出小串在大串中出 ...

  8. BZOJ3456 城市规划 【生成函数】【FFT】

    题目分析: 容易想到生成函数的构造方法. 令g(n)表示n个点的无向图个数,f(n)表示n个点的无向连通图的个数.式子是显然的. 容易发现式子是卷积的形式,写出生成函数,然后多项式求逆后多项式乘法即可 ...

  9. 自学Linux Shell7.1-linux用户账户和组

    点击返回 自学Linux命令行与Shell脚本之路 7.1-linux用户账户和组 linux安全系统的核心是用户账户.每个能进入linux系统的用户都会被分配唯一的用户账户,用户对系统中各对象的访问 ...

  10. 洛谷 P2058 海港 解题报告

    P2058 海港 题目描述 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只情况: ...