<div id="app">

        <div @click="handleClickOne">

            <p @click="handleClickTwo">测试</p>

        </div>

    </div>

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

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

               text:'hello'

            },

            methods: {

                handleClickOne() {

                    alert('父元素')

                },

                handleClickTwo() {

                    alert('子元素')

                }

            }

        })

    </script>

1.事件冒泡, 是从里到外的,  可以看到,  先 子元素  后 父元素

2.事件捕获   是从 外 到内的,  先 父元素   后 子元素   @click.capture

<div id="app">

        <div @click.capture="handleClickOne">

            <p @click.capture="handleClickTwo">测试</p>

        </div>

    </div>

 注释: 课外拓展

3.  @click.self="handleClick"

 点击 父元素内容才触发点击事件,   点 子元素 无效,  有时候 需要这样的功能   





<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>阻止冒泡点击事件的弊端</title>

</head>

<body>

    <div id="app">

        <div @click.self="handleClick">

            我是父元素内容

            <p>我是子元素,点我没用, 加了self</p>

        </div>

    </div>

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

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

               text:'hello'

            },

            methods: {

                handleClick() {

                    alert('点击了')

                }

            }

        })

    </script>

</body>

</html>






<div id="app">


        <div @click="handleClickOne">


            <p @click="handleClickTwo">测试</p>


        </div>


    </div>


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


    <script>



        var vm = new Vue({


            el: '#app',


            data: {


               text:'hello'


            },


            methods: {


                handleClickOne() {


                    alert('父元素')


                },


                handleClickTwo() {


                    alert('子元素')


                }


            }


        })


    </script>


												


											
vue中事件冒泡规则和事件捕获规则的更多相关文章
	

    
						
  1. javascript 事件传播与事件冒泡，W3C事件模型
		
    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...
    
		
    2. 
						
  2. vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
		
    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
    
		
    3. 
						
  3. vue.js阻止事件冒泡和默认事件
		
    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
    
		
    4. 
						
  4. vue阻止事件冒泡和默认事件
		
    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
    
		
    5. 
						
  5. vue中使用element组件时事件想要传递其他参数的问题
		
    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中 ...
    
		
    6. 
						
  6. 关于事件冒泡和键盘事件 以及与Angular的区别
		
    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
    
		
    7. 
						
  7. 谈事件冒泡(Bubble)和事件捕捉(capture)
		
    事件的发生顺序 假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler).如果用户单击元素2,则元素1和元素2的单击事件都会被触发.但是哪一个事件先被 ...
    
		
    8. 
						
  8. JavaScript事件冒泡机制和阻止事件冒泡及默认事件
		
    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...
    
		
    9. 
						
  9. JS---DOM---事件冒泡和阻止事件冒泡，总结事件
		
    事件冒泡: 多个元素嵌套, 有层次关系 ,这些元素都注册了相同的事件, 如果里面的元素的事件触发了, 外面的元素的该事件自动的触发了     事件有三个阶段: 1.事件捕获阶段  :从外向内 2.事件 ...
    
		
    10. 
						
  10. 关于JS事件冒泡与JS事件代理（事件委托）
		
    连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. unittest的discover方法批量执行02
			
    前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了. 加载用例后,用unittest里面的Text ...
    
			
    2. 
						
  2. sql中数据统计
			
    今天来说一下使用sql统计数据. 用的H2数据库,用的是DBeaver连接工具.有三表,打印表PRINT_JOB,复印表COPY_JOB和扫描表SCANNER_JOB (这段可以忽略)任务是要统计相同 ...
    
			
    3. 
						
  3. 使用digispark制作一个BadUSB
			
    0X00.工具准备 digispark开发板. 淘宝连接:https://m.tb.cn/h.VK7vwjy?sm=d85844 0X01.安装Arduino IDE环境 1.安装 arduino 的 ...
    
			
    4. 
						
  4. C# 委托应用总结（委托,Delegate,Action,Func,predicate）
			
    C# 委托应用总结 一.什么是委托 1.1官方解释 委托是一种定义方法签名的类型.当实例化委托时,您可以将其实例与任何具有兼容签名的方法相关联.您可以通过委托实例调用方法. 1.2个人理解 委托就是执 ...
    
			
    5. 
						
  5. 10ISE14.7和modelsim10.5关联编译库
			
    今天准备在ISE14.7中调用PLL的IP核,搞一下时钟的分频和倍频.可在我做好pll的IP核后,我直接用ise生成了一个仿真文件,只需要修改下例化模块名和加一个时钟就行勒. 问题:但怎么在ISE14 ...
    
			
    6. 
						
  6. WebGPU 工具分享 - WGSL 代码高亮插件（VSCode）与预处理工具
			
    WGSL 还在积极讨论中,虽然各位大佬不是很满意这个新生儿. 不过,社区已经有了基础的实验性工具(VSCode 插件),并支持了较新的语法. ① WGSL 插件 这个插件支持对文件扩展名为 .wgsl ...
    
			
    7. 
						
  7. JDBC操作数据库的步骤 ？
			
    注册数据库驱动. 建立数据库连接. 创建一个Statement. 执行SQL语句. 处理结果集. 关闭数据库连接.
    
			
    8. 
						
  8. 什么是 Spring Profiles？
			
    Spring Profiles 允许用户根据配置文件(dev,test,prod 等)来注册 bean.因此,当应用程序在开发中运行时,只有某些 bean 可以加载,而在 PRODUCTION中,某些 ...
    
			
    9. 
						
  9. 一个Spring的应用看起来象什么？
			
    一个定义了一些功能的接口. 这实现包括属性,它的Setter , getter 方法和函数等. Spring AOP. Spring 的XML 配置文件. 使用以上功能的客户端程序.
    
			
    10. 
						
  10. web自动化测试用例编写的规范
			
    1.一个脚本是一个完整的场景,从用户登陆操作到用户退出系统关闭浏览器. 2.一个脚本脚本只验证一个功能点,不要试图用户登陆系统后把所有的功能都进行验证再退出系统 3.尽量只做功能中正向逻辑的验证,不要 ...
    
			
    11.