1. 原生事件冒泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{  

                },

                methods:{

                    show:function(ev){

                        alert(1);

                        //ev.cancelBubble=true;

                    },

                    show2:function(){

                        alert(2);

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <div @click="show2()">

            <input type="button" value="按钮" @click="show($event)">

        </div>

    </div>

</body>

</html>

事件冒泡：

从内向外扩散，点击input,会扩散到外层的div,一直向上扩散。点击完按钮，会依次执行事件show()和show2()

结果：

先弹出1，后弹出2

使用原生js取消冒泡：ev.cancelBubble=true;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{  

                },

                methods:{

                    show:function(ev){

                        alert(1);

                        ev.cancelBubble=true;

                    },

                    show2:function(){

                        alert(2);

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <div @click="show2()">

            <input type="button" value="按钮" @click="show($event)">

        </div>

    </div>

</body>

</html>

点完按钮后，只弹出1来。

2.Vue中事件冒泡

取消事件冒泡：使用 .stop来取消事件冒泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{  

                },

                methods:{

                    show:function(){

                        alert(1);

                    },

                    show2:function(){

                        alert(2);

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <div @click="show2()">

            <input type="button" value="按钮" @click.stop="show()">

        </div>

    </div>

</body>

</html>

Vue之事件冒泡的更多相关文章

  1. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  2. vue 的事件冒泡

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  3. vue中事件冒泡规则和事件捕获规则

    <div id="app"> <div @click="handleClickOne"> <p @click="hand ...

  4. vue 阻止事件冒泡

    <mt-button type="danger" size="small"  @click="cancelOrderInfo(this.even ...

  5. vue 事件修饰符（阻止默认行为和事件冒泡）

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  6. vue.js事件，属性，以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  7. vue的事件

    vue的事件: vue事件简写: vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写   @click='show()' ...

  8. vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  9. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  10. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

随机推荐

  1. kafka入门必备知识

    1. Kafka是一个分布式流处理平台: 可以让你发布和订阅流式的记录.这一方面与消息队列或者企业消息系统类似. 可以储存流式的记录,并且有较好的容错性. 可以在流式记录产生时就进行处理. 2. 消息 ...

  2. Github-Readme-Stats 简明教程

    1. 更新 Readme 文件 在你想要放置 Readme-WakaTime 的位置中放置以下注释,这将作为程序的入口 <!--START_SECTION:waka--> <!--E ...

  3. EDP转LVDS屏转接板方案芯片CS5211替代CH7511B电路设计

    CS5211替代CH7511B电路设计: CS5211用于设计DP转LVDS转换器,DP转LVDS控制板,DP转LVDS转接板等产品设计,其性能和参数可以替代与兼容PS8622,PS8625,CH75 ...

  4. 体细胞突变检测分析流程-系列1（ WES&Panel）

    Sentieon●体细胞变异检测-系列1   Sentieon 致力于解决生物信息数据分析中的速度与准确度瓶颈,通过算法的深度优化和企业级的软件工程,大幅度提升NGS数据处理的效率.准确度和可靠性. ...

  5. 飞桨paddlespeech语音唤醒推理C定点实现

    前面的文章(飞桨paddlespeech语音唤醒推理C浮点实现)讲了飞桨paddlespeech语音唤醒推理的C浮点实现.但是嵌入式设备通常CPU频率低和memory小,在嵌入式设备上要想流畅的运行语 ...

  6. .NET for Apache Spark 调试

    .NET for Apache Spark 调试 官方文档:在 Windows 上部署 .NET for Apache Spark 应用程序 | Microsoft Learn 打开"新命令 ...

  7. 并发编程-FutureTask解析

    1.FutureTask对象介绍 Future对象大家都不陌生,是JDK1.5提供的接口,是用来以阻塞的方式获取线程异步执行完的结果. 在Java中想要通过线程执行一个任务,离不开Runnable与C ...

  8. Redis持久化机制 RDB、AOF、混合持久化详解！如何选择？

    本文已经收录进 JavaGuide(「Java学习+面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识.) Redis 持久化机制属于后端面试超高频的面试知识点,老生常谈了,需要重点花时间 ...

  9. 学习Linux，要把握哪些重点？

    学习Linux,要把握哪些重点? 不知道有没有想学习Linux,但又把握不住学习重点,找不到合适的学习方法的小伙伴,反正我刚开始学习Linux时就像无头苍蝇似的"乱撞",没有把握住 ...

  10. vscode c++食用指南

    准备 配置环境为机房的 win10. 首先你需要下载 vscode. 可以从官网下载:https://code.visualstudio.com/Download 配置编译c++ 下载完之后安装好,界 ...