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. 【Java】工具类 -- 持续更新

    Java原生工具类 Objects requireNotNull():为空抛异常,不为空返回本身 deepEquals():对象深度相等(数组层面)判断 调用Arrays.deepEquals0() ...

  2. 【原创】CPU性能优化小记

    CPU性能优化小记 目录 CPU性能优化小记 一.现象 TOP各指标含义 二.分析 启动应用前 启动应用后 采集内核函数的方法 内核采集分析 火焰图分析 三.解决 一.现象 业务线反馈,单板只要一跑我 ...

  3. ranger2.1.0源码编译以及安装

    ranger2.1.0源码编译以及安装 编译环境准备 环境需求 示例版本 JDK8 Java(TM) SE Runtime Environment (build 1.8.0_231-b11) mave ...

  4. WebSSH之录屏安全审计（三）

    第一篇:Gin+Xterm.js实现WebSSH远程Kubernetes Pod(一) 第二篇:WebSSH远程管理Linux服务器.Web终端窗口自适应(二) 支持用户名密码认证 支持SSH密钥认证 ...

  5. jQuery真伪数组转换

    // 真数组转伪数组 [].push.apply(obj,arr); // 伪数组转真数组 [].slice.call(obj);

  6. 使用C#的窗体显示与隐藏动画效果方案 - 开源研究系列文章

    今天继续研究C#的WinForm的显示动画效果. 上次我们实现了无边框窗体的显示动画效果(见博文:基于C#的无边框窗体动画效果的完美解决方案 - 开源研究系列文章 ),这次介绍的是未在任务栏托盘中窗体 ...

  7. nodejs中如何使用http创建一个服务

    http模块是nodejs中非常重要的一部分,用于开启一个服务,我们可以用它自定义接口供客户端使用.   开启服务的方式也比较简单,几行代码就可以搞定 const http = require('ht ...

  8. 使用ClamAV进行linux病毒扫描

    前言 ClamAV是一个在命令行下查毒(并非杀毒)的软件,其免费开源跨平台.ClamAV默认只能查出服务器内的病毒,但是无法清除,最多删除. 安装ClamAV yum install -y epel- ...

  9. .NET5从零基础到精通：全面掌握.NET5开发技能【第二章】

    章节: 第一章:https://www.cnblogs.com/kimiliucn/p/17613434.html 第二章:https://www.cnblogs.com/kimiliucn/p/17 ...

  10. Redis系列18：过期数据的删除策略

    Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...