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基础]String,StringBuffer,StringBuilder的区别

    String 和 StringBuffer/StringBuilder应该分开来看 java.lang.String源码中的注释说明 java.lang.StringBuffer源码中的注释说明 ja ...

  2. 使用react-test-renderer/shallow写测试

    我的项目是采用react + ts来写的,项目中要写单元测试,于是采用了Jest库,  主要用的package有 react-test-renderer react-test-renderer/sha ...

  3. Blazor提取出Razor类库，没有css的class的智能提示

    最开始从stackoverflow上找到了答案,有两种办法,但都不太理想 后来自己找了新的办法,其实很简单,把要用的css复制到Razor类库的wwwroot文件夹中,默认是不会复制到引用Razor类 ...

  4. 一：wince 开发环境

    1:下载相关文件,vs2008 可以自行搜索安装 链接:https://pan.baidu.com/s/1b2shwCqmc1o9x-zsy8CmeA 提取码:qing

  5. 提示工程101｜与 AI 交谈的技巧和艺术

    随着 ChatGPT 的问世,人工智能(AI)新时代也正式开启.ChatGPT 是一种语言模型.它与用户进行对话交互,以便用户输入问题或提示,模型响应,然后对话可以继续来回进行,类似于在消息传递应用程 ...

  6. sudo：pam_open_session Permission denied 与 Too many open files

    sudo:pam_open_session Permission denied 一,验证 sudo 权限失败: /etc/sudoers 文件未给相关用户配置权限. 打开 /etc/sudoers 文 ...

  7. Cilium系列-12-启用 Pod 的 BBR 拥塞控制

    系列文章 Cilium 系列文章 前言 将 Kubernetes 的 CNI 从其他组件切换为 Cilium, 已经可以有效地提升网络的性能. 但是通过对 Cilium 不同模式的切换/功能的启用, ...

  8. 2023-08-06：小青蛙住在一条河边, 它想到河对岸的学校去学习 小青蛙打算经过河里 的石头跳到对岸 河里的石头排成了一条直线, 小青蛙每次跳跃必须落在一块石头或者岸上 给定一个长度为n的数组ar

    2023-08-06:小青蛙住在一条河边, 它想到河对岸的学校去学习 小青蛙打算经过河里 的石头跳到对岸 河里的石头排成了一条直线, 小青蛙每次跳跃必须落在一块石头或者岸上 给定一个长度为n的数组ar ...

  9. 关于Openssh版本升级问题及版本升级到最新版8.7p1流程（CentOS7系统）

    前言: 对linux服务器做过漏洞扫描的都知道,常常服务器会被扫出一大堆关于openssh的漏洞,诸如下面这些,而其中的原因就是因为openssh版本比较低.于是就需要升级openssh的版本.下面就 ...

  10. Baby_python 反编译

    ok,直接pyc直接反编译 逻辑清楚 拿到flag直接搞 结果提交给错了我把前缀改成flag{}这种格式也给错真是摸不着头脑 难道是base64解密错误?? 找了另外一个网站 ???这个是啥?? 与之 ...