<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. 原生JS添加事件方法
			
    事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => clic ...
    
			
    2. 
						
  2. mybatis连接sql
			
    mysql6以上  com.mysql.cj.jdbc.Driver
    
			
    3. 
						
  3. redis规范（实用）
			
    redis功能强大,数据类型丰富,再快的系统,也经不住疯狂的滥用.通过禁用部分高风险功能,并挂上开发的枷锁,业务更能够以简洁.通用的思想去考虑问题,而不是绑定在某种实现上. Redis 根据不同的用途 ...
    
			
    4. 
						
  4. 4月26日 python学习总结 JoinableQueue、线程、三种锁
			
    一.进程队列补充-创建进程队列的另一个类JoinableQueue JoinableQueue同样通过multiprocessing使用. 创建队列的另外一个类: JoinableQueue([max ...
    
			
    5. 
						
  5. 无线渗透之破解wifi
			
    首先你要有一张支持kali的网卡,因为这整个过程都是在kali下进行的 开启网卡监听模式 # airmon-ng start wlan0 监听附近的无线 # airodump-ng wlan0mon  ...
    
			
    6. 
						
  6. 【转】pringMVC+Hibernate+Spring 简单的一个整合实例
			
    ref:http://langgufu.iteye.com/blog/2088355 SpringMVC又一个漂亮的web框架,他与Struts2并驾齐驱,Struts出世早而占据了一定优势,我在博客 ...
    
			
    7. 
						
  7. Mapper 编写有哪几种方式？
			
    第一种:接口实现类继承 SqlSessionDaoSupport:使用此种方法需要编写 mapper 接口,mapper 接口实现类.mapper.xml 文件. 1.在 sqlMapConfig.x ...
    
			
    8. 
						
  8. 集合迭代器Iterator
			
    迭代器模式:就是提供一种方法对一个容器对象中的各个元素进行访问,而又不暴露该对象容器的内部细节. 什么是迭代器Iterator? Java集合框架的集合类,我们有时候称之为容器.容器的种类有很多种,比 ...
    
			
    9. 
						
  9. 说说三元运算和if...else的相同之处
			
    三元运算符和if-else语句:不同之处. a) 三元运算符是必须要有返回值,而if-else语句并不一定有返回值,其执行结果可能是赋值语句或者打印输出语句. b) java三元表达式有字符强转(双目 ...
    
			
    10. 
						
  10. java-jsp-learnning
			
    简介:JSP(全称Java Server Pages) 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ser ...
    
			
    11.