Vue中的事件修饰符

最新推荐文章于 2024-07-20 23:54:17 发布

NL_LIU

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量35

点赞数

分类专栏： VUE学习文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/sddycai/article/details/134171566

版权

VUE学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue中的事件修饰符：
                       1.prevent：阻止默认事件（常用）；可以阻止a标签的默认跳转行为用法（@click.prevent）也可以
                       showInfo(e)
                           e.preventDefault()

                       2.stop：阻止事件冒泡（常用）；传统js写法 vue写法在下方。
                       showInfo(3){
                           e.stopPropagation();
                       }
                       3.once：事件只触发一次（常用）；
                       4.capture：使用事件的捕获模式；
                       5.self：只有event.target是当前操作的元素时才触发事件；
                       6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；可以阻止a标签的默认跳转行为用法（@click.prevent）也可以
						showInfo(e)
							e.preventDefault()
							
						2.stop：阻止事件冒泡（常用）； 传统js写法 vue写法在下方。
						showInfo(3){
							 e.stopPropagation();
						}
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） --> 
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

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

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

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

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

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

NL_LIU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的事件修饰符

1.prevent：阻止默认事件（常用）；可以阻止a标签的默认跳转行为用法（@click.prevent）也可以。5.self：只有event.target是当前操作的元素时才触发事件；2.stop：阻止事件冒泡（常用）；传统js写法 vue写法在下方。6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；4.capture：使用事件的捕获模式；3.once：事件只触发一次（常用）；
复制链接

扫一扫