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不是当前操作的元素,所有没有触发事件,这个在一定程度上面也可以阻止冒泡

如果不加指令会怎么样?

发生了事件冒泡



相关推荐
腾讯TNTWeb前端团队26 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试