在Vue中，关于事件冒泡

87 阅读 0 评论 58 点赞

我是靠谱客的博主粗心月饼，最近开发中收集的这篇文章主要介绍在Vue中，关于事件冒泡，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在项目中或多或少都会遇见关于事件冒泡的问题。
什么是事件冒泡：
对于父元素的事件，你的子元素也会触发，可以理解为父债子还。
对于我们而言，经常会有不想让某个子元素去触发父元素的事件，也就是说，上一辈欠的钱，别来找我要。
这个时候我们就需要来阻止事件冒泡了。
一般情况我们这样来实现：

<!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>