vue-事件修饰符

最新推荐文章于 2023-01-09 01:11:28 发布

想养一只萨摩耶～

最新推荐文章于 2023-01-09 01:11:28 发布

阅读量398

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_50652600/article/details/127084491

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1）默认行为和阻止默认行为

<body>

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- <button v-on:click="showInfo">点我提示信息</button>  -->
      <a href="https:www.baidu.com" @click="showInfo">点我提示信息</a>
 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示

      
        const vm =  new Vue({
        el:'#root',
        data:{
        name:'爪哇开发'
        },
        methods: {
        showInfo(event){
            alert('同学你好')
        }
    }

        })
        
    </script>
    
</body>

打开之后效果如下：

大家可以发现，在点击了showInfo事件并且确定之后，页面自动跳转到超链接了。这是一个默认事件。那么如何阻止这个默认行为呢？可以将时间改成如下形式。这样就不会跳转了。

以上就演示了默认行为和阻止事件默认行为

2）事件冒泡和阻止事件冒泡

<style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>

    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- 阻止默认事件 （常用） -->
      <a href="https:www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
      <div class="demo1" @click="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>
 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示

      
        const vm =  new Vue({
        el:'#root',
        data:{
        name:'爪哇开发'
        },
        methods: {
        showInfo(event){
            alert('同学你好')
        }
    }

        })
        
    </script>
    
</body>

阻止事件冒泡：

打开后：

3）让事件只触发一次

总结：

Vue中的事件修饰符：

1）prevent：阻止默认事件（常用）

2）stop：阻止事件冒泡

3）once：事件只触发一次（常用）

4）capture：使用事件的捕获模式

5) self：只有event.target是当前操作的元素才触发事件

6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕

想养一只萨摩耶～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-事件修饰符

大家可以发现，在点击了showInfo事件并且确定之后，页面自动跳转到超链接了。那么如何阻止这个默认行为呢？可以将时间改成如下形式。5) self：只有event.target是当前操作的元素才触发事件。6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕。以上就演示了默认行为和阻止事件默认行为。1）prevent：阻止默认事件（常用）4）capture：使用事件的捕获模式。3）once：事件只触发一次（常用）2）stop：阻止事件冒泡。
复制链接

扫一扫

专栏目录