<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. 记录一次docker容器内修改my.cnf配置文件max_allowed_packet参数的过程
			
    1. 问题背景 在一次新版本功能开发完毕,配合测试的过程中,测试反馈某个XxlJob定时任务一直执行失败,在分析了日志之后,找到了报错的原因: Packet for query is too larg ...
    
			
    2. 
						
  2. laravel7 下拉搜索
			
    html:页面 首先给下拉框一个页面改变事件,将下拉框的值发送至后台,进行查询 <select name="interest" id="serarch"  ...
    
			
    3. 
						
  3. laravel7 搜索关键字标红及手机号，身份证号隐藏
			
    控制器代码 public function index(Request $request) { //接受搜索关键字 $word = $request->get('name'); $start = ...
    
			
    4. 
						
  4. 制作自己的rpm包，并为其制作patch包。
			
    本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...
    
			
    5. 
						
  5. Open Babel的安装与使用
			
    技术背景 Open Babel是化学领域常用的一个文件格式转换工具,它可以支持xyz的坐标格式.SMILES表达式.InChI表达式和mol以及mol2等格式之间的互相转化.比如说,你只有一个甲烷的S ...
    
			
    6. 
						
  6. ASP.NET Core 6框架揭秘实例演示[24]：中间件的多种定义方式
			
    ASP.NET Core的请求处理管道由一个服务器和一组中间件组成,位于 "龙头" 的服务器负责请求的监听.接收.分发和最终的响应,针对请求的处理由后续的中间件来完成.中间件最终体 ...
    
			
    7. 
						
  7. jdbc model 代码示例
			
    package com.gylhaut.model; import java.util.Date; public class Goddess { @Override public String toS ...
    
			
    8. 
						
  8. CentOS7 yum源修改为阿里，配置阿里epel源
			
    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.概念/区分: yum源 什么是yum源: yum是一个在CentOS.RedHat和Fedora操作系统中使用的Shell前端软件包管理器. ...
    
			
    9. 
						
  9. Discuz 7.x、6.x 全局变量防御绕过导致代码执行
			
    0x01 分析 由于php5.3.x版本里php.ini的设置里request_order默认值为GP,导致REQUEST中不再包含_REQUEST中不再包含R​EQUEST中不再包含_COOKIE, ...
    
			
    10. 
						
  10. Flink不止于计算，存算一体才是未来
			
    ​ "伴随着实时化浪潮的发展和深化,Flink 已逐步演进为实时流处理的领军技术和事实标准.Flink 一方面持续优化其流计算核心能力,不断提高整个行业的流计算处理标准,另一方面沿着流批一体 ...
    
			
    11.