在Vue中，关于事件冒泡
在项目中或多或少都会遇见关于事件冒泡的问题。什么是事件冒泡：对于父元素的事件，你的子元素也会触发，可以理解为父债子还。对于我们而言，经常会有不想让某个子元素去触发父元素的事件，也就是说，上一辈欠的钱，别来找我要。这个时候我们就需要来阻止事件冒泡了。一般情况我们这样来实现：<!DOCTYPE html><html><head&am
·
在项目中或多或少都会遇见关于事件冒泡的问题。
什么是事件冒泡：
对于父元素的事件，你的子元素也会触发，可以理解为父债子还。
对于我们而言，经常会有不想让某个子元素去触发父元素的事件，也就是说，上一辈欠的钱，别来找我要。
这个时候我们就需要来阻止事件冒泡了。
一般情况我们这样来实现：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function doSometing(obj,evt){
alert(obj.id);
// 做浏览器兼容
var e = (evt)? evt:window.event; //获取IE或非IE浏览器的事件
if (window.event) { //如果是IE浏览器
e.cancelBubble = true; //IE浏览器，设置该属性为true,取消事件冒泡
}else{
e.stopPropagation(); //非IE浏览器，该方法取消事件的进一步捕获或冒泡。
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id);" style="width: 250px;background-color: #cacaca">
<p>This is parent1 div</p>
<div id="child1" onclick="alert(this.id);" style="width: 200px;background-color: orange">
<p>This is child1.Will bubble.</p>
</div>
</div>
<br>
<div id="parent2" onclick="alert(this.id);" style="width: 250px;background-color: cyan;">
<p>This is parent2 div</p>
<div id="child2" onclick="doSomething(this,event);" style="width: 200px;background-color: #aeaeae">
<p>This is child2.</p>
</div>
</div>
</div>
</body>
</html>而在Vue中，我们则有一个内容叫做事件修饰符：
事件修饰符
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。
为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀？
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献6条内容
所有评论(0)