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. .NET周刊【7月第4期 2023-07-23】

    国内文章 你知道.NET的字符串在内存中是如何存储的吗? https://www.cnblogs.com/artech/p/string-memory-layout.html 毫无疑问,字符串是我们使 ...

  2. 并发编程-CompletableFuture解析

    1.CompletableFuture介绍 CompletableFuture对象是JDK1.8版本新引入的类,这个类实现了两个接口,一个是Future接口,一个是CompletionStage接口. ...

  3. PyQt5调用主窗口

    import sysfrom ui.MainWindow import Ui_Form from PyQt5.QtWidgets import QApplication, QMainWindowcla ...

  4. 浏览器中的自动化操作插件：Automa

    相信很多小伙伴跟我一样,每天都有大量基于浏览器的重复操作,比如:查看任务.查看新闻.查看各种每天要关注的内容,甚至可能还需要对其做一些操作.那么这些任务是否有办法自动化执行呢? 今天就给大家推荐一个浏 ...

  5. sqli笔记

    MySQL数据库自带的数据库information_schema 里面有三个比较重要的表  SCHEMATA .TABLES . COLUMNS  保存数据库所有的数据库名 表名  字段名 SCHEM ...

  6. Unity的IPostprocessBuildWithReport：深入解析与实用案例

    Unity IPostprocessBuildWithReport Unity IPostprocessBuildWithReport是Unity引擎中的一个非常有用的功能,它可以让开发者在构建项目后 ...

  7. 服务端apk打包教程

    本文我将给大家介绍一个 apk 打包工具 VasDolly 的使用介绍.原理以及如何在服务端接入 VasDolly 进行服务端打渠道包操作. 使用介绍 VasDolly 是一个快速多渠道打包工具,同时 ...

  8. 牛客小白月赛64 C题 题解

    题目链接 题意描述 这一题的意思其实就是,让你构造一个\(n * k\)的矩阵,使得第 i 列的总和为 i ,同时使得:每一列的任意两个数之间的差不大于1,且任意两行之间的总和差不大于1. \(1 \ ...

  9. 【io_uring】内核源码分析（更新中）

    文章目录 `io_uring` 系统调用 `io_uring_setup` `io_uring_setup` `io_uring_create` `io_sq_offload_start` 系统调用 ...

  10. CodeForces 1367F2 Flying Sort (Hard Version)

    题意 给一个长度为\(n\)的数组,你可以有两种操作 将某一个数放置在数组开头 将某一个数放置在数组结尾 问最小操作多少次可以得到一个非递减数列 (比\(F1\)难在\(n\)变大,且数组中元素可以有 ...