[Vue]事件修饰符

Vue中的事件修饰符：
1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用)；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；（达到类似stop的效果）
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
                    一般会先执行响应事件，响应事件结束后回调执行默认事件。但工作量较大会有卡顿问题，可用passive解决。移动端用得多。
                    （scroll指的是滚动条滚动，键盘上下、鼠标滚轮均可触发，按照滚动条的位移距离多次触发。
                    wheel指的是鼠标滚轮滚动，鼠标滚轮滚1次，事件触发1次。）
7. native：在组件的根元素上直接监听一个原生事件
               （多用于组件库使用原生事件，如el-card上使用@click.native）

多个事件修饰符可以连续写，如：@click.prevent.stop

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="lib/vue-2.5.9.js"></script>
    <style>
        .box {
            background-color: aquamarine;
            width: 200px;
            height: 40px;
            margin: 10px;
        }

        .list {
            width: 200px;
            height: 200px;
            background-color: rosybrown;
            overflow: scroll;
        }

        li {
            height: 100px;
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 阻止默认事件 -->
        <a href="https://www.baidu.com" @click.prevent="show_info">点我去百度</a>

        <div class="box" id="demo0" @click="show_log(0)">
            <!-- 阻止事件冒泡 -->
            <button id="demo1" @click.stop="show_log(1)"> 点我打印stop</button>
            <!-- 只触发一次 -->
            <button id="demo2" @click.once="show_log(2)"> 点我打印once</button>
        </div>

        <!-- 多个事件修饰符可以连续写。有先后顺序，一般影响不大 -->
        <div class="box" id="demo0" @click="show_log(0)">
            <a href="https://www.baidu.com" @click.prevent.stop="show_info(1)">点我去百度</a>
        </div>

        <!-- 事件捕获，先获取再冒泡 -->
        <div class="box" id="demoo0" @click.capture="show_log(0)">
            <button id="demoo1" @click="show_log(1)">事件捕获capture</button>
        </div>

        <!-- 只有event.target是当前操作的元素是才触发事件（也可以阻止冒泡） -->
        <div class="box" id="demoo0" @click.self="show_log(0)">
            <button id="demoo1" @click="show_log(1)">self</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- 一般会先执行响应事件，响应事件结束后回调执行默认事件。但工作量较大会有卡顿问题，可用passive解决。移动端用得多。 -->
        <!-- scroll指的是滚动条滚动，键盘上下、鼠标滚轮均可触发，按照滚动条的位移距离多次触发 -->
        <!-- wheel指的是鼠标滚轮滚动，鼠标滚轮滚1次，事件触发1次 -->
        <!-- <ul class="list" @scroll="gun"> -->
        <ul class="list" @wheel="gun">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            name: 'mingzi',
        },
        methods: {
            show_info: function () {
                alert('被骗了！！')
            },
            show_log: function (info) {
                console.log('我是日志，来自-->', info)
            },
            gun: function () {
                for (var i = 0; i < 10000; i++) {
                    console.log('在滚了在滚了')
                }
                console.log('啊~~ 累坏了 QAQ')
            }
        }
    })
</script>
</html>

 

posted @ 2023-10-22 12:47  夕苜19  阅读(69)  评论(0)  编辑  收藏  举报