Vue-事件修饰符

发布于：2025-05-18 ⋅ 阅读:(15) ⋅ 点赞:(0)

事件修饰符

prevent （阻止默认事件）

超链接 + 点击事件

  • 代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> prevent 阻止默认事件 </h2>
            <a target="_blank" href="http://www.baidu.com"  @click="showTip">点我提示信息</a> 
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showTip(e){
                    console.log("你好 " + this.name)
                }
            },
        });
    </script>
</html>
  • 效果
  1. 控制台输出 ： 你好 菜逼
  2. 新标签页打开： 百度首页
    在这里插入图片描述

想禁止超链接的默认跳转

  • 解决办法
    • 调用事件的阻止默认操作方法 preventDefault
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> prevent 阻止默认事件 </h2>
            <a target="_blank" href="http://www.baidu.com"  @click="showTip">点我提示信息</a> 
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showTip(e){
                    e.preventDefault(); // 阻止默认事件方法
                    console.log("你好 " + this.name)
                }
            },
        });
    </script>
</html>
  • 效果
  1. 控制台输出：你好 菜逼
  2. 不打开新标签页跳转百度首页

在这里插入图片描述

  • 简写

@click="showTip" => @click.prevent="showTip"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> prevent 阻止默认事件 </h2>
            <a target="_blank" href="http://www.baidu.com"  @click.prevent="showTip">点我提示信息</a> 
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showTip(e){
                    // e.preventDefault(); // 阻止默认事件方法
                    console.log("你好 " + this.name)
                }
            },
        });
    </script>
</html>

stop (阻止事件冒泡)

DIV 及其 子元素 Button 均包含点击事件

  • 代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> stop 阻止事件冒泡 </h2>
            <div @click="showDiv">
                <button @click="showButton">点我提示信息</button>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showDiv(e){
                    console.log("你好 Div")
                },
                showButton(e){
                    console.log("你好 Button")
                }
            },
        });
    </script>
</html>
  • 效果
  1. 点击按钮, 输出： 你好 Button
  2. div上的点击事件也触发了，输出： 你好 Div

在这里插入图片描述

想禁止触发 Div 的点击事件

  • 解决办法
    • 调用事件的阻止事件冒泡方法 stopPropagation
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> stop 阻止事件冒泡 </h2>
            <div @click="showDiv">
                <button @click="showButton">点我提示信息</button>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showDiv(e){
                    console.log("你好 Div")
                },
                showButton(e){
                    e.stopPropagation();// 阻止事件冒泡
                    
                    console.log("你好 Button")
                }
            },
        });
    </script>
</html>
  • 效果

点击按钮, 只输出： 你好 Button
在这里插入图片描述

  • 简写

@click="showButton" => @click.stop="showButton"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> stop 阻止事件冒泡 </h2>
            <div @click="showDiv">
                <button @click.stop="showButton">点我提示信息</button>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showDiv(e){
                    console.log("你好 Div")
                },
                showButton(e){
                    console.log("你好 Button")
                }
            },
        });
    </script>
</html>

once （只触发一次）

  • 代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> once 只触发一次 </h2>
            <div @click="showDiv">
                <button @click.once="showButton">点我提示信息</button>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showButton(e){
                    console.log("你好 Button")
                }
            },
        });
    </script>
</html>
  • 效果

多次点击，只输出一次：你好 Button

在这里插入图片描述

capture (使用事件的捕获模式)

Div1、2嵌套且均包含点击事件

  • 代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;
            }
            .div1{
                padding: 5px;
                background-color: gray;
            }
            .div2{
                padding: 5px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> capture 使用事件的捕获模式 </h2>
            <div class="div1"  @click="showMsg('div1')">
                div1
                <div class="div2"  @click="showMsg('div2')">
                    div2
                </div>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showMsg(msg){
                    console.log("你好 " + msg)
                }
            },
        });
    </script>
</html>
  • 效果
  1. 事件的捕获是 从外到内 div1 -> div2
  2. 事件的冒泡是 从内到外 div2 -> div1·
  3. 因此先输出 你好 div2 再输出 你好 div1

在这里插入图片描述

想让按照事件捕获顺序触发事件

  • 代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;
            }
            .div1{
                padding: 5px;
                background-color: gray;
            }
            .div2{
                padding: 5px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> capture 使用事件的捕获模式 </h2>
            <div class="div1"  @click.capture="showMsg('div1')">
                div1
                <div class="div2"  @click="showMsg('div2')">
                    div2
                </div>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showMsg(msg){
                    console.log("你好 " + msg)
                }
            },
        });
    </script>
</html>
  • 效果
  1. @click="showMsg('div1')" => @click.capture="showMsg('div1')"
  2. 开启了捕获模式，捕获时就调用方法
  3. 先输出 你好 div1 再输出 你好 div2

在这里插入图片描述

self (只有event.target是自己时才调用)

DIV 及其 子元素 Button 均包含点击事件

  • 代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;
            }
            .div1{
                padding: 5px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> self 只有event.target是自己时才触发事件 </h2>
            <div class="div1" @click="showDiv">
                <button @click="showButton">点我提示信息</button>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showDiv(e){
                    console.log("你好 Div")
                    console.log("div的event.target->",e.target)
                },
                showButton(e){
                    console.log("你好 Button")
                }
            },
        });
    </script>
</html>
  • 效果
  1. 先输出 你好 Button
  2. 再输出 你好 Div
  3. 输出div触发事件的target是 <button >点我提示信息</button> 。（因为是点击按钮的冒泡事件）

在这里插入图片描述

想不是点击div自己就不触发事件

  • 代码

@click="showDiv" => @click.self="showDiv"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;
            }
            .div1{
                padding: 5px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>事件修饰符</h1>
            <h2> self 只有event.target是自己时才触发事件 </h2>
            <div class="div1" @click.self="showDiv">
                <button @click="showButton">点我提示信息</button>
            </div>
        </div>
        
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      
        new Vue({
            el:'#root', 
            data:{ 
                name:"菜逼"
            },
            methods: {
                showDiv(e){
                    console.log("你好 Div")
                    console.log("div的event.target->",e.target)
                },
                showButton(e){
                    console.log("你好 Button")
                }
            },
        });
    </script>
</html>
  • 效果

只输出 你好 Button div的点击事件没有触发（变向的阻止事件冒泡）

在这里插入图片描述

passive (事件行为立即执行，无需等待回调执行完成)

  • 代码

鼠标滚轮事件 @wheel

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      * {
        margin-top: 20px;
      }
      .list {
        height: 200px;
        width: 200px;
        background-color: gray;
        overflow: auto;
      }
      li {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>事件修饰符</h1>
      <h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2>
      <ul class="list" @wheel="load">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:"菜逼"
        },
        methods: {
            load(e){
                for(let i = 0; i<10000; i++){
                    setTimeout(1000);
                    console.log("睡了"+(i+1)+ "秒")
                }
                console.log("执行完了");
            }
        }
    });
  </script>
</html>
  • 效果

发现必须等到最终输出 执行完了 滚动条才下移

在这里插入图片描述

  • 想让滚动条直接下移

@wheel="load" => @wheel.passive="load"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      * {
        margin-top: 20px;
      }
      .list {
        height: 200px;
        width: 200px;
        background-color: gray;
        overflow: auto;
      }
      li {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>事件修饰符</h1>
      <h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2>
      <ul class="list" @wheel.passive="load">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:"菜逼"
        },
        methods: {
            load(e){
                for(let i = 0; i<10000; i++){
                    setTimeout(1000);
                    console.log("睡了"+(i+1)+ "秒")
                }
                console.log("执行完了");
            }
        }
    });
  </script>
</html>

在这里插入图片描述

  • 使用 @scroll 则没有这个问题

@wheel.passive="load" => @scroll="load"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      * {
        margin-top: 20px;
      }
      .list {
        height: 200px;
        width: 200px;
        background-color: gray;
        overflow: auto;
      }
      li {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>事件修饰符</h1>
      <h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2>
      <ul class="list" @scroll="load">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:"菜逼"
        },
        methods: {
            load(e){
                for(let i = 0; i<10000; i++){
                    setTimeout(1000);
                    console.log("睡了"+(i+1)+ "秒")
                }
                console.log("执行完了");
            }
        }
    });
  </script>
</html>

在这里插入图片描述

  • 特殊说明

passive 常用于 APP 或者 平板之类的应用优化使用
并不是所有的事件均使用，需具体事件具体分析

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布