<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. VuePress 博客优化之增加 Valine 评论功能
			
    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...
    
			
    2. 
						
  2. 2022年官网下安装Elasticsearch最全版与官网查阅方法（8.1.0最新安装）
			
    目录 一.环境整合(需要提前装好) 构建工具(参考工具部署方式) 二.官方下载Elasticsearch部署安装 1.百度搜索"Elasticsearch",或者访问官网https ...
    
			
    3. 
						
  3. RepLKNet：不是大卷积不好，而是卷积不够大，31x31卷积了解一下 | CVPR 2022
			
    论文提出引入少数超大卷积核层来有效地扩大有效感受域,拉近了CNN网络与ViT网络之间的差距,特别是下游任务中的性能.整篇论文阐述十分详细,而且也优化了实际运行的表现,值得读一读.试一试   来源:晓飞 ...
    
			
    4. 
						
  4. TLS 1.0 至 1.3 握手流程详解
			
    概述 TLS 全称为 Transport Layer Security(传输层安全),其前身是 SSL,全称为 Secure Sockets Layer(安全套接字层),它的作用是为上层的应用协议提供 ...
    
			
    5. 
						
  5. 27.Java 飞机游戏小项目
			
    开篇 游戏项目基本功能开发 飞机类设计 炮弹类设计 碰撞检测设计 爆炸效果的实现 其他功能 计时功能 游戏项目基本功能开发 这里将会一步步实现游戏项目的基本功能. 使用 AWT 技术画出游戏主窗口 A ...
    
			
    6. 
						
  6. BUU findkey
			
    定位关键函数 跟入flag找到问题位置 两行一样的代码,nop掉第二行,按p生成函数 代码审计 int __userpurge sub_4018C4@<eax>(int a1@<eb ...
    
			
    7. 
						
  7. RenderDoc图形调试器详细使用教程(基于DirectX11)
			
    前言 由于最近Visual Studio的图形调试器老是抽风,不得不寻找一个替代品了. 对于图形程序开发者来说,学会使用RenderDoc图形调试器可以帮助你全面了解渲染管线绑定的资源和运行状态,从而 ...
    
			
    8. 
						
  8. 使用 RabbitMQ 有什么好处？
			
    (1)服务间高度解耦 (2)异步通信性能高 (3)流量削峰
    
			
    9. 
						
  9. spring-boot-learning 日志相关
			
    sprint-boot 日志   市面上的日志框架: JUL.JCL.Jboss-logging.logback.log4j.log4j2.slf4j.... SpringBoot:底层是Spring ...
    
			
    10. 
						
  10. Redis Set Type
			
    集合中的元素个数最多为2的32次方-1个,集合中的元素师没有顺序的. Redis集合的操作命令和对应的api如下: smembers [set] JedisAPI:public Set<Stri ...
    
			
    11.