1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
写的两种都可以,现在用的比较多的就是直接加在@click后面
<!-- 1.prevent:阻止默认事件(常用); -->
showInfo(e) {
// (1). prevent:阻止默认事件(常用);
// (2). e.preventDefault()
alert('你好')
}
<a href="http://www.baidu.com" @click.prevent="showInfo">点击一下</a>
<!-- 2.stop:阻止事件冒泡(常用); -->
<div @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 3.once:事件只触发一次(常用) -->
<button @click.once="showInfo">点击一下</button>
<!-- 4.capture:使用事件的捕获模式; -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
<div>div2</div>
</div>
</div>
<!-- 5.self:只有event.target是当前操作的元素时才触发事件; -->
<div @click.self="showInfo">
<button @click="showInfo">点击一下</button>
</div>
<!-- 6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕; -->
<ul @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul @scroll="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>