海浪Code

Appearance

Vue中的事件修饰符 ​

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

阻止默认事件 ​

javascript
@click.prevent="atip"
// click后面加prevent

第二种写法：

javascript
atip(e){
    alert('啊埃杜阿多大');
    // 阻止默认事件
    e.preventDefault()
    console.log(e)
}

阻止冒泡 ​

javascript
<div class="box" @click="atip">
    <button @click.stop="atip">点我弹窗</button>
</div>

第二种写法

javascript
e.stopPropagation()

事件只触发一次 ​

javascript
<button @click.once="atip">点我弹窗</button>

捕获阶段触发事件 ​

事件的触发默认是在冒泡阶段触发的。

将capture修饰符加在外层元素事件上。

html
<div class="box1" @click.capture="tip(1)">
    box1
    <div class="box2" @click="tip(2)">
        box2
    </div>
</div>

事件自身触发 ​

此方法也可以阻止冒泡。

html
<!-- 只有event.target是当前操作的元素时才触发 -->
<div class="box1" @click.self="tip">
    box1
    <div class="box2" @click="tip">
        box2
    </div>
</div>

立即执行 ​

事件的默认行为立即执行，无需等待事件的回调函数执行完毕

JavaScript
<ul class="list" @wheel.passive="demo">
//无需滚动条的事件执行完毕即可滚动

但不是所有事件都有影响的。

修饰符可以连续写 ​

先阻止冒泡，在阻止默认的事件

vue
<a href="https://www.baidu.com" @click.stop.prevent="demo"></a>