Vue框架中的事件修饰符

修饰符含义.stop阻止冒泡.prevent阻止默认事件.capture添加事件监听器时使用事件捕获模式.self只当事件在该元素本身触发事件once事件只触发一次

主要代码演示：

由于script代码和css代码一样，在此只写一份：

<style> .inner{ width: 500px; height: 100px; background-color: pink; } </style> <script> var vm = new Vue({ el: '#app', data:{ }, methods:{ divHandler(){ console.log("触发了div的点击事件") }, btnHnadler(){ console.log("触发了按钮的点击事件") }, linkClick(){ console.log("prevent阻止了link的默认跳转事件") } } }); </script>

---

当没有任何修饰符修饰时

<div id="app"> <div class="inner" @click = "divHandler"> <input type="button" value="你猜点击会不会冒泡" @click = "btnHnadler"> </div> </div>

结果

.stop

<div id="app"> <div class="inner" @click = "divHandler"> <!-- 事件修饰符stop可以阻止事件冒泡--> <input type="button" value="你猜点击会不会冒泡" @click.stop = "btnHnadler"> </div> </div>

结果

.prevent

<div id="app"> <!--事件修饰符prevent可以阻止默认事件--> <a href="http://www.baidu.com" @click.prevent = "linkClick">有问题上百度</a> </div>

结果

.capture

<div id="app"> <!-- 事件修饰符capture可以捕获触发事件的机制--> <div class="inner" @click.capture = "divHandler"> <input type="button" value="你猜点击会不会冒泡" @click = "btnHnadler"> </div> </div>

结果

.self

<div id="app"> <!--事件修饰符self可以实现只有点击当前元素才会触发事件处理机制--> <div class="inner" @click.self = "divHandler"> <input type="button" value="你猜点击会不会冒泡" @click = "btnHnadler"> </div> </div> </div>

结果

.once

<div id="app"> <!--事件修饰符prevent可以阻止默认事件--> <!--事件修饰符once只会触发一次事件处理函数--> <a href="http://www.baidu.com" @click.prevent.once = "linkClick">有问题上百度</a> </div>

结果

注： 本次结果需要自己去实验，截图并不能很好的理解含义，只有自己真正动手去做才能体会其中的含义。