capture捕捉模式

最新推荐文章于 2022-05-16 10:42:14 发布

百日梦想家

最新推荐文章于 2022-05-16 10:42:14 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42418169/article/details/107918937

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

什么是capture捕捉模式？

说明： 简单来说就是，当一个元素开启了capture模式时，它会自动对自己内部的子元素所做出的的事件反应，内部元素执行click，它随之做click动作

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>default</title>
		<!-- 注意：要引入Vue.js -->
		<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.outer{
				padding: 50px;
				background-color: #555555;
			}
			.inner{
				width: 100%;
				height: 100px;
				background-color: #EE3D11;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="outer" v-on:click.capture="outer_click">
				<div class="inner" v-on:click="inner_click">
					<button type="button" v-on:click.stop="button_click">按钮</button>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{
					outer_click:function(){
						console.log('触发了outer的click事件')
					},
					inner_click:function(){
						console.log('触发了inner的click事件')
					},
					button_click:function(){
						console.log('触发了button的click事件')
					}
				}
			});
		</script>
	</body>
</html>

效果

在这里插入图片描述

百日梦想家

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
capture捕捉模式

什么是capture捕捉模式？说明：简单来说就是，当一个元素开启了capture模式时，它会自动对自己内部的子元素所做出的的事件反应，内部元素执行click，它随之做click动作实例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1">
复制链接

扫一扫