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. ElasticSearch - 批量更新bulk死锁问题排查

    一.问题系统介绍 监听商品变更MQ消息,查询商品最新的信息,调用BulkProcessor批量更新ES集群中的商品字段信息; 由于商品数据非常多,所以将商品数据存储到ES集群上,整个ES集群共划分了2 ...

  2. IoTOS v1.0.0 开源 高效 实用 | 免费商用

    IoTOS v1.0.0 一款高效实用 IoTCard 管理 & 运营系统. IoTOS 目前取名范围过大,其主要用于IoTCard 管理业务以高效.健壮.灵活设计 SaaS.多语言.机器人推 ...

  3. axios详解以及完整封装方法

    """ 一.axios是什么 Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中. 它是 isomorphic 的(即同一套代码可以运行 ...

  4. linux 查看进程使用的内存大小

    你可以使用 ps 命令结合 grep 命令来查看进程使用的内存大小.以下是示例代码: ps aux | grep <进程名> 这个命令会列出所有匹配 <进程名> 的进程,并显示 ...

  5. （转）[Android测试] Android Studio+Appium+Java+Windows 自动化测试之二:Appium环境安装搭建

    一.需要下载安装的东西 1. 文件下载 网上也有挺多安装教程的,这里我提供我的安装方法.Win10 64位.一些文件我在后面打包. 2016.9.12号本人安装记录. SDK: 由于我是搞Androi ...

  6. 如何将 dubbo filter 拦截器原理运用到日志拦截器中？

    业务背景 我们希望可以在使用日志拦截器时,定义属于自己的拦截器方法. 实现的方式有很多种,我们分别来看一下. 拓展阅读 java 注解结合 spring aop 实现自动输出日志 java 注解结合 ...

  7. [linux]常见内核TCP参数描述与配置

    前言 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失),如果需要固化设置,则需要修改/etc ...

  8. centos7升级内核到最新稳定版

    前言 centos7默认的内核版本才3.10,诸如VXLAN.eBPF等特性无法体验,因此需要升级.目前(2022.02)Linux的内核版本已更新到5.16. 步骤 更新仓库 yum update ...

  9. 论文解读（SimGCL）《Are Graph Augmentations Necessary? Simple Graph Contrastive Learning for Recommendation》

    Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息 论文标题:Are Graph Augmentations Necessary? Simple Graph Contr ...

  10. ros源的移除

    在Ubuntu上卸载了ros系统后,每次运行源更新命令 sudo apt update 都会报错,提示ros源找不到等问题. 这时,只需要 cd /etc/apt/souce.list.d sudo ...