当前位置：首页 > news >正文

Vue基础(5)_事件修饰符

news 来源：原创 2025/4/29 2:43:04

事件修饰符

Vue中的事件修饰符：
1、prevent：阻止默认事件(常用)。
2、stop：阻止事件冒泡(常用)。
3、once：事件只触发一次(常用)。
4、capture：使用事件的捕获模式。
5、self：只有event.target是当前操作的元素时才触发事件。
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>事件修饰符</title><style>li {margin: 5px 0px;}h3 span {color: coral;font-style: italic;}div.box1 {display: flex;width: 400px;height: 50px;background-color: aquamarine;justify-content: center;align-items: center;}.box2,.box3 {width: 400px;height: 100px;background-color: aquamarine;}button {width: auto;height: 30px;}.list {width: 200px;height: 200px;overflow: auto;background-color: aquamarine;}.list li {height: 100px;}</style><script>window.onload = function () {var vm = new Vue({el: '#root',data: {name1: '事件修饰符',},methods: {showInfo() {alert("哈哈");console.log(event.target)},showMeg(e) {alert(e);console.log(e.target)},demo() {for (let i = 0; i < 10000; i++) {console.log("#");}console.log("计算完毕，结果为：**");}},})}</script>
</head><body><div id="root"><h3><span>{{name1}}</span></h3><ol><!-- 默认事件 --><li><a href="https://www.baidu.com/" @click="showInfo">点我提示信息01(弹窗后自动跳走【默认事件】)</a></li><!-- 阻止默认事件(常用) --><li><a href="https://www.baidu.com/" @click.prevent="showInfo">点我提示信息02(弹窗后不会自动跳走)</a></li><!-- 阻止事件冒泡(常用)  --><li><div @click="showInfo" class="box1"><button @click.stop="showInfo"><strong>点我提示信息03 </strong>(阻止按钮事件冒泡)</button></div></li><!-- 事件仅触发一次(常用)   --><li><button @click.once="showInfo"><strong>点我提示信息04 </strong>(事件仅触发一次)</button></li><!-- 使用事件的捕获模式 --><li><div @click.capture="showMeg(11)" class="box2"><div>盒子一</div><button @click="showMeg(22)"><strong>盒子二</strong>(捕获模式下，事件先执行盒子01再执行盒子02)</button></div></li><!-- 只有event.target是当前操作的元素时才触发事件 --><li><div @click.self="showInfo" class="box3"><div><strong>盒子01</strong>(当前操作元素为：<code> &lt;div class="box3"&gt;...&lt;/div&gt; </code>)</div><button@click.self="showMeg(33)">盒子02(当前操作元素为：<code> &lt;button&gt;...&lt;/button&gt; </code>)</button></div></li><!-- 添加了passive修饰后，滚动条立即执行滚动，而无需等循环结束后在滚动，从而避免页面卡顿(scroll事件则不影响，不需要额外添加passive) --><li><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></li></ol></div></body>
</html>