Vue 事件处理 -- 事件修饰符(prevent、stop、capture、self、once)

1. 事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用);
  2. stop:阻止事件冒泡(常用);
  3. once:事件只触发一次(常用);
  4. capture:使用事件的捕获模式;
  5. self:只有event.target是当前操作的元素时才触发事件;

示例代码:

html 复制代码
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src=".../js/vue.js"></script>
<style>
* {
margin-top: 20px;
}

复制代码
	<span class="token selector">.demo1</span> <span class="token punctuation">{<!-- --></span>
		<span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	<span class="token selector">.box1</span> <span class="token punctuation">{<!-- --></span>
		<span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	<span class="token selector">.box2</span> <span class="token punctuation">{<!-- --></span>
		<span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	<span class="token selector">.list</span> <span class="token punctuation">{<!-- --></span>
		<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span> peru<span class="token punctuation">;</span>
		<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	<span class="token selector">li</span> <span class="token punctuation">{<!-- --></span>
		<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</head>

<body>
<!--
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{ {name}}学习</h2>
<!-- 阻止默认事件(常用) -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

复制代码
	<span class="token comment">&lt;!-- 阻止事件冒泡&#xff08;常用&#xff09; --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>demo1<span class="token punctuation">&#34;</span></span> <span class="token attr-name">&#64;click</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showInfo<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">&#64;click.stop</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showInfo<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>点我提示信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
		<span class="token comment">&lt;!-- 修饰符可以连续写 先写的先起作用: 这样写就是先阻止默认行为后阻止冒泡--&gt;</span>
		<span class="token comment">&lt;!-- &lt;a href&#61;&#34;http://www.atguigu.com&#34; &#64;click.prevent.stop&#61;&#34;showInfo&#34;&gt;点我提示信息&lt;/a&gt; --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

	<span class="token comment">&lt;!-- 事件只触发一次&#xff08;常用&#xff09; --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">&#64;click.once</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showInfo<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>点我提示信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

	<span class="token comment">&lt;!-- 使用事件的捕获模式 --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>box1<span class="token punctuation">&#34;</span></span> <span class="token attr-name">&#64;click.capture</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showMsg(1)<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		div1
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>box2<span class="token punctuation">&#34;</span></span> <span class="token attr-name">&#64;click</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showMsg(2)<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
			div2
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

	<span class="token comment">&lt;!-- 只有event.target是当前操作的元素时才触发事件&#xff1b; --&gt;</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>demo1<span class="token punctuation">&#34;</span></span> <span class="token attr-name">&#64;click.self</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showInfo<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">&#64;click</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>showInfo<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>点我提示信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

复制代码
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
	<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&#39;#root&#39;</span><span class="token punctuation">,</span>
	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;尚硅谷&#39;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
		<span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&#39;同学你好&#xff01;&#39;</span><span class="token punctuation">)</span>
			<span class="token comment">// console.log(e.target)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">showMsg</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

</html>


1.1 prevent:阻止默认事件(常用)

html:

html 复制代码
		<!-- 阻止默认事件(常用) -->
		<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

js:

运行效果:

a标签的默认有跳转到href的行为,我们把默认行为禁用后,就不会跳转页面

补充:

如果不使用Vue指令,那么怎么屏蔽事件的默认行为呢?


1.2 stop:阻止事件冒泡(常用)

html:

html 复制代码
		<!-- 阻止事件冒泡(常用) -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

js:

运行结果:

如果不组织事件冒泡:

如果不使用Vue指令,那么怎么阻止事件冒泡呢?


1.3 once:事件只触发一次(常用)

html:

html 复制代码
		<!-- 事件只触发一次(常用) -->
		<button @click.once="showInfo">点我提示信息</button>

js:

运行结果:


1.4 capture:使用事件的捕获模式

html:

html 复制代码
		<!-- 使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

js:

运行结果:

关闭事件捕获:


分析原因:


1.5 self:只有event.target是当前操作的元素时才触发事件

html:

html 复制代码
		<!-- 只有event.target是当前操作的元素时才触发事件; -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>

js:

运行结果:

因为event.target不是当前操作的元素,所有没有触发事件,这个在一定程度上面也可以阻止冒泡

如果不加指令会怎么样?

发生了事件冒泡



相关推荐
Mapmost1 分钟前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
幻灵尔依29 分钟前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子29 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳30 分钟前
CSS 基础概念
前端·css·css3
前端小巷子31 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar38 分钟前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫21 小时前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun1 小时前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙1 小时前
React Hooks 详解
前端·javascript
南囝coding1 小时前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端