在Vue中,关于事件冒泡

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



<html>

<head>

        <title>Testtitle>

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

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

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

你可能感兴趣的:(前端开发)