Vue(2)事件修饰符

最新推荐文章于 2023-08-02 23:06:28 发布

就是三木啊

最新推荐文章于 2023-08-02 23:06:28 发布

阅读量170

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43783419/article/details/100700979

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.inner{
				height:100px;
				width:1000px;
				background-color:pink;
			}
		</style>
		<!-- 导入vue包 -->
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用 .stop 阻止冒泡 -->
			<div @click="divHandler" class="inner">
				<input type="button" value="戳他" @click.stop="btnHandler"/>
			</div>
			<!-- 使用.prevent阻止默认行为-->
			<a href="http://www.baidu.com" @click.prevent="linkClick"></a>
			<!-- 使用 .capture 捕获事件-->
			<div @click.apture="divHandler" class="inner">
				<input type="button" value="戳他" @click="btnHandler"/>
			</div>
			<!-- 使用 .self 显示元素本身事件-->
			<div @click.self="divHandler" class="inner">
				<input type="button" value="戳他" @click="btnHandler"/>
			</div>
		</div>
		<script type="text/javascript">
			//创建vue实例,得到viewModel
			var vm = new Vue({
				el:'#app',
				data:{},
				methods: {
					divHandler(){
						console.log('这是触发了inner div 的点击事件')
					},
					btnHandler(){
						console.log('这是触发了btn 的点击事件')
					}，
					linkClick(){
						console.log('这是触发了link的点击事件')
					},
				}
			})
		</script>
	</body>
</html>

.stop阻止冒泡

	<div @click="divHandler" class="inner">
		<input type="button" value="戳他" @click="btnHandler"/>
	</div>

如果不添加点击btn 会出现这种情况：
在这里插入图片描述
添加以后就可以阻止冒泡：

	<!-- 使用 .stop 阻止冒泡 -->
	<div @click="divHandler" class="inner">
		<input type="button" value="戳他" @click.stop="btnHandler"/>
	</div>

在这里插入图片描述

prevent 阻止默认行为

默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。

不添加的话会跳转网页跳转到百度首页

<a href="http://www.baidu.com" @click="linkClick"></a>

添加的话不会跳转

<a href="http://www.baidu.com" @click.prevent="linkClick"></a>

.capture：捕获事件

即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

<div @click.apture="divHandler" class="inner">
			<input type="button" value="戳他" @click="btnHandler"/>
</div>

在这里插入图片描述

. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

<div @click.self="divHandler" class="inner">
		<input type="button" value="戳他" @click="btnHandler"/>
</div>

在这里插入图片描述

. once：设置事件只能触发一次，比如按钮的点击等。

就是三木啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(2)事件修饰符

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .inner{ height:100px; width:1000px; background-color:pink;...
复制链接

扫一扫

专栏目录