<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. RhaPHP 微信公众号管理系统
			
    框架网址https://www.rhaphp.com/ 开发手册网址:: https://www.kancloud.cn/langleigelang/rhaphp/588488 git 克隆,如果克隆 ...
    
			
    2. 
						
  2. angular1使用echarts2绘制图标
			
    一.绘制柱状图:直接上代码 1.首先下载echarts-all文件(这里就不赘述了),然后是创建一个bar.js及内容如下: bar.js内容: var app = require("../ ...
    
			
    3. 
						
  3. Java编程学习笔记(基础篇)
			
    一.Java中的数据类型 1.基本数据类型:四类 八种 byte(1) boolean(1) short(2) char(2) int(4) float(4) long(8) double(8) 2. ...
    
			
    4. 
						
  4. vue中使用js-cookie插件
			
    js-cookie是一个用于处理 cookie 的简单.轻量级 JavaScript API,官方文档:https://www.npmjs.com/package/js-cookie. 一.安装 np ...
    
			
    5. 
						
  5. Microsoft Edge如何安装去广告插件
			
    Microsoft Edge如何安装去广告插件 第一步:安装最新版本Edge https://www.microsoft.com/zh-cn/edge?form=MA13DO&OCID=MA1 ...
    
			
    6. 
						
  6. CentOS 通过shell脚本过滤得到服务器IP地址
			
    1.CentOS 6.x (32Bit &&64Bit) [root@localhost ~]# ifconfig |grep Bcast |awk '{print$2}' |sed  ...
    
			
    7. 
						
  7. 使用tc配置后端设备，来限制虚拟机网卡带宽
			
    如果通过tc来限制虚拟机网卡接收方向带宽呢,实际上使用tc对接收方向限制的不够好,使用tc ingress可以限制接收,但是功能不够多,而且会形成丢包问题.一般是采用将流量重定向到一个虚拟设备ifb上 ...
    
			
    8. 
						
  8. onGUI常用脚本学习（引用）
			
    https://blog.csdn.net/Hannah1221/article/details/101941174?spm=1001.2101.3001.6650.3&utm_medium= ...
    
			
    9. 
						
  9. XML约束DTD
			
    <元素1> <元素2> <元素3>描述1</元素3> <元素4>描述2</元素4> </元素2> </元素1& ...
    
			
    10. 
						
  10. Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
			
    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应,例如,ceil的英文意义是天花板,该方法就表示向上取整,所以,Math.ceil( ...
    
			
    11.