Debug客栈
做一个爱分享的程序猿
Debug客栈
Vue.js入门笔记 事件修饰符

友情提示:此篇文章大约需要阅读 6分钟0秒,不足之处请多指教,感谢你的阅读。订阅本站

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

Vue 事件修饰符
  • .stop 阻止事件继续传播(阻止冒泡)
  • .prevent 阻止默认事件
  • .capture 添加事件监听器时使用事件捕获模式
  • .self 只点击当前元素才会被执行
  • .once 只触发一次事件处理函数
  • .passive 只有修饰符

.stop 阻止冒泡

<h1>.stop 阻止事件冒泡</h1>
<div class="inside" @click.stop="inside">
    <input type="button" value="确定" @click.stop="button">
</div>
var vm = new Vue({
    el : "#app",
    methods: {
        button(){
            console.log("触发了点击 button 事件");
        },
        inside(){
            console.log("触发了点击 inside 事件");
        },
    },
});
https://img.debuginn.cn/wp-content/uploads/2019/11/image.png
stop事件

.prevent 阻止默认事件

<h1>.prevent 阻止默认事件</h1>
<p>点击链接的时候阻止跳转事件</p>
<a href="http://debuginn.cn" @click.prevent="clickLink">Debug客栈</a>
<br>
var vm = new Vue({
    el : "#app",
    methods: {
        button(){
            console.log("触发了点击 button 事件");
        },
        inside(){
            console.log("触发了点击 inside 事件");
        },
        clickLink(){
            console.log("触发了点击 链接点击 事件");
        }
    },
});
https://img.debuginn.cn/wp-content/uploads/2019/11/image-1.png
prevent事件

点击链接的时候阻止跳转事件。

.capture 添加事件监听器时使用事件捕获模式

https://img.debuginn.cn/wp-content/uploads/2019/11/image-2.png
capture事件

.self 只点击当前元素才会被执行

点击那个元素,那个元素才有事件产生,父子元素互不影响。

<h1>.self 只点击当前元素才会被执行</h1>
    <div class="outside" @click.self="outside">
        <div class="inside" @click.self="inside">
            <input type="button" value="确定" @click.self="button">
        </div>
    </div>
<br>
var vm = new Vue({
    el : "#app",
    methods: {
        button(){
            console.log("触发了点击 button 事件");
        },
        inside(){
            console.log("触发了点击 inside 事件");
        },
        outside(){
            console.log("触发了点击 outside 事件");
        },
        clickLink(){
            console.log("触发了点击 链接点击 事件");
        }
    },
});

.once 只触发一次事件处理函数

https://img.debuginn.cn/wp-content/uploads/2019/11/image-3.png
once事件

第一次点击元素有事件产生,第二次点击就没有相对应事件的产生。

<h1>.once 只触发一次事件处理函数</h1>
    <div class="outside" @click.once="outside">
        <div class="inside" @click.once="inside">
            <input type="button" value="确定" @click.once="button">
        </div>
    </div>
<br>

.passive 只有修饰符

https://img.debuginn.cn/wp-content/uploads/2019/11/image-4.png
passive事件1
https://img.debuginn.cn/wp-content/uploads/2019/11/image-5.png
passive事件2

点击元素后有事件产生之后发生跳转事件。

<h1>.passive 只有修饰符</h1>
<a href="http://debuginn.cn" @click.passive="clickLink">Debug客栈</a>
<br>
赞赏
本文链接:https://www.debuginn.cn/4379.html
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,转载请保留此文章链接
相关链接: 首页  |  引导页  |  赞助本站  |  @QQ  |  @微博  |  @Bilibili  |  @推特  |  @Github  |  阿里云活动
社会主义核心价值观: 富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善

发表评论

textsms
account_circle
email

Debug客栈

Vue.js入门笔记 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处…
扫描二维码继续阅读
2019-11-24