prevent: 阻止默认事件(常用)

prevent用于阻止默认事件,例如: 本来是个a标签点击后应该打开网页,使用prevent后就可以阻止原本的"打开网页"

在click后面跟上prevent

<div id="root">
         <!--prevent: 阻止默认事件(常用)-->
         <a href="https://www.yuofyou.cn" @click.prevent="showInfo">点我提示信息</a>
    </div>

并在showInfo中写上弹出信息框的代码

<script type="text/javascript">
      new Vue({
        el:"#root",
        data:{
            name:'特曼博客'
        },
        methods:{
            showInfo(event){
                alert("你好")
            }
        }
      })
</script>

此时 a标签不会跳转网页,只会弹出信息框

stop: 阻止事件冒泡(常用)

在一个div里有一个按钮, 给div添加被点击后执行showInfo , 给按钮添加被点击后执行showInfo1

<div id="root">

        <!--stop: 阻止事件冒泡(常用)-->

        <div @click="showInfo" >
            <button  @click="showInfo1">点我提示信息</button>
        </div>
    </div>
<script type="text/javascript">
      new Vue({
        el:"#root",
        data:{
            name:'特曼博客'
        },
        methods:{
            showInfo(event){
                alert("你好")
            },showInfo1(event){
                alert("你好里面的")
            }
        }
      })
</script>

点击按钮后会依次弹出两个信息框
第一个:

第二个:

说明是先执行的showInfo1 再执行的showInfo (像冒泡一样,从内到外)

如果我想阻止这种冒泡, 只需要添加stop

<div @click="showInfo" >
            <button  @click.stop="showInfo1">点我提示信息</button>
        </div>

此时就只会执行按钮的showInfo1事件

once: 事件只触发一次(常用)

正常我们点击按钮的时候, 每次点击都会执行一遍click对应的showInfo 例如:

<button  @click="showInfo">点我提示信息</button>

如果我们只想 第一次点击的时候执行showInfo,之后就不再执行了,只需要添加once

<!--once: 事件只触发一次(常用)-->
        <button  @click.once="showInfo">点我提示信息</button>

capture: 使用事件的捕获模式

运行下面一段代码 观察控制台

<style>
        .box1{
            padding:5px;
            background-color:skyblue;
        }
        .box2{
            padding:5px;
            background-color:orange;

        }
    </style>
    
<body>
    <div id="root">
       <div class="box1" @click="showMsg(1)">
        div1
             <div  class="box2" @click="showMsg(2)">
                 div2
             </div>
        </div>


    </div>
</body>

<script type="text/javascript">
      new Vue({
        el:"#root",
        data:{
            name:'特曼博客'
        },
        methods:{
            showMsg(msg){
                console.log(msg)
            }
        }
      })
</script>

当点击div2时,控制台分别输出 2 1 说明先触发的box2 再触发的box1 这也是上面提到的冒泡

如果我们想先触发box1 再触发box2 ,这就需要使用实际的捕获模式capture

<body>
    <div id="root">

       <!--capture: 使用事件的捕获模式-->
       <div class="box1" @click.capture="showMsg(1)">
        div1
             <div  class="box2" @click="showMsg(2)">
                 div2
             </div>
        </div>


    </div>
</body>

此时再点击,就是先输出的1 再输出2

self: 只有event.target是当前操作的元素时才触发事件

除了使用.stop修饰符,还有一种修饰符self,意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。

<div class="demo1" @click.self="showInfo" >
            <button  @click="showInfo">点我提示信息</button>
        </div>

passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕

当滑动鼠标滚轮的时候, 执行demo ,而此时demo有一个需要很长时间执行的循环, 只有当循环执行完毕以后滚轮才会滑动

<!--passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕-->
        <ul @wheel="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
<script type="text/javascript">
      new Vue({
        el:"#root",
        data:{
            name:'特曼博客'
        },
        methods:{
            demo(){
                for(let i=0;i<100000;i++){
                    console.log('@')
                }
                console.log("end")
            }

        }
      })
</script>

如果想立即执行滚轮滚动这个工作, 无需等待循环执行完毕.
那么就加上passive

<!--passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕-->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

总结

Vue中的事件修饰符:

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

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>07事件修饰符</title>
        <script type="text/javascript" src="../js/vue.js"> </script><!-- 引入Vue-->
        <style>
            .demo1{
                background-color: skyblue;
            }
            .box1{
                padding:5px;
                background-color:skyblue;
            }
            .box2{
                padding:5px;
                background-color:orange;

            }
            .list{
                width:200px;
                height:200px;
                background-color: peru;
                overflow: auto;
            }
            li{
                height:100px;
                
            }
        </style>
    </head>

<!--
    Vue中的事件修饰符:
        1. prevent: 阻止默认事件(常用)
        2. stop: 阻止事件冒泡(常用)
        3. once: 事件只触发一次(常用)
        4. capture: 使用事件的捕获模式
        5. self: 只有event.target是当前操作的元素时才触发事件
        6. passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕
-->
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!--prevent: 阻止默认事件(常用)-->
        <a href="https://www.yuofyou.cn" @click.prevent="showInfo">点我提示信息</a>
        <!--stop: 阻止事件冒泡(常用)-->
        <hr>
        <div @click="showInfo" >
            <button  @click.stop="showInfo">点我提示信息</button>
        </div>
        <hr>
        <!--once: 事件只触发一次(常用)-->
        <button  @click.once="showInfo">点我提示信息</button>
        <hr>
        <!--capture: 使用事件的捕获模式-->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div  class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <!--self: 只有event.target是当前操作的元素时才触发事件-->
        <hr>
        <div clss="demo1" @click.self="showInfo" >
            <button  @click="showInfo">点我提示信息</button>
        </div>
        <hr>
        <!--passive: 事件的默认行为立即执行, 无需等待事件回调执行完毕-->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

    </div>
</body>

<script type="text/javascript">



      new Vue({
        el:"#root",
        data:{
            name:'特曼博客'
        },
        methods:{
            showInfo(e){
               
                alert('hello')
            },
            showMsg(msg){
                console.log(msg)
            },
            demo(){
                
                for(let i=0;i<100000;i++){
                    console.log('@')
                }
                console.log("end")
            }

        }
      })
</script>


</html>

补充

修饰符可以连写 例如:
<a href="https://www.yuofyou.cn" @click.stop.prevent="showInfo">测试</a>

最后修改:2022 年 07 月 31 日
如果觉得我的文章对你有用,请随意赞赏