capture
.capture 事件修饰符的作用添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器, 当元素发生冒泡时, 先触发带有该修饰符的元素. 若有多个该修饰符, 则由外而内触发.
就是谁有该事件修饰符, 就先触发谁.(捕获阶段触发, 从外向内, 没有 capture 修饰符的, 从内向外冒泡触发)
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- .capture 事件修饰符
- </title>
- <style type="text/CSS">
- * { margin: 0 auto; text-align: center; line-height: 40px; } div { width:
- 100px; } #obj1 { background: deeppink; } #obj2 { background: pink; } #obj3
- { background: hotpink; } #obj4 { background: #ff4225; }
- </style>
- <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js">
- </script>
- </head>
- <body>
- <div id="content">
- <div id="obj1" v-on:click.capture="doc(event)">
- obj1
- <div id="obj2" v-on:click.capture="doc(event)">
- obj2
- <div id="obj3" v-on:click="doc(event)">
- obj3
- <div id="obj4" v-on:click="doc(event)">
- obj4
- <!--.............................. 点击 obj4 的时候, 弹出的顺序为: obj1,obj2,obj4,obj3;
- 由于 1,2 有修饰符, 故而先触发事件, 然后就是 4 本身触发, 最后冒泡事件. -->
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- var content = new Vue({
- el: "#content",
- data: {
- id: ''
- },
- methods: {
- doc(event) {
- this.id = event.currentTarget.id;
- alert(this.id)
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3101073.html