JQuery与VUE阻止冒泡事件，事件修饰符

我笔记

于 2021-09-01 15:20:55 发布

阅读量229

点赞数

分类专栏：前端设计文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/y1535623813/article/details/120040654

版权

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。

通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。

<style>
        #content{
            width: 140px;
            border: 1px solid blue;
        }
        #msg{
            width: 100px;
            height: 100px;
            margin: 20px;
            border: 1px solid red;
        }
</style>
　　<body>    　　　　　
　<div id="content">   	 　　　　　　　　　　　　
外层div   		　　　　　　　　　　　　　
　<div id="msg">   			　　　　　　　　　　　　　　　　
内层div   		　　　　　　　　　　　　　
　</div>   	　　　　　
　</div>

　　</body>

<script type="text/javascript" src="js/jquery-

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我笔记

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

jquery阻止事件冒泡

zylzb的专栏

10-27

962

在使用jquery进行事件处理的时候，当从里到外的多层都响应某一事件，然后又在里层发生该事件时，jquery默认是会从里到外依次响应各个事件的，然而有时候这并不是我们所需要的。这个时候就需要我们来阻止外层事件的发生，阻止冒泡。 jquery中可以用来阻止事件冒泡的主要有两种，stopPropagation()和return false 如： MyHtml.

Vue学习之旅Part2：Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)

"✧treasure mountain✧"

04-17

1万+

一、v-bind 先来一个常见场景：在vue里定义了个名为mytitle的属性 <script> var vm=new Vue({ el:"#app", data:{ mytitle:"This is a title!" }, }) </script> 此时如果 <input...

参与评论您还未登录，请先登录后发表或查看评论

Jquery阻止事件冒泡 event.stopPropagation

12-11

描述：防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。 version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。这个方法对 trigger() 来自定义的事件同样有效。注意，这不会阻止同一个元素上的其它事件处理函数的运行。 Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；元素上的事件

JQuery阻止事件冒泡

weixin_30478757的博客

11-10

283

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的...

JQuery中阻止事件冒泡方式及其区别

cfm_123456的专栏

01-09

730

JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; $("#div1").mousedown(

JQ--阻止点击事件冒泡

xiao白的博客

11-13

1295

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阻止点击事件冒泡</title> <style> .father { width: 400px;.

vue 面试题库（20题）

weixin_47295135的博客

09-16

2398

1、什么是虚拟dom？使用它有什么好处虚拟dom是利用js描述元素与元素的关系。好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能 2、简述vue中常用的指令（最少写出六个） v-html 解析输出变量能解析html v-text 解析输出变量 v-bind 给标签绑定属性可以简写为 :属性名=“变量” v-on 给元素绑定事件用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法” v-pre 跨过当前的标签不解析用法：<标签 v-pre>&

vue主动触发事件

最新发布

03-25

还需要注意Vue的事件系统和原生事件的区别，特别是在组件封装时，可能需要使用.native修饰符或者$listeners属性。此外，用户可能在实际应用中遇到了问题，比如为什么手动触发的事件没有生效，或者事件的传播机制...

Vuejs的最完整的选择解决方案没有jQuery

08-10

- **事件修饰符**：Vue.js 提供事件修饰符，如 `.prevent` 阻止默认行为，`.stop` 阻止事件冒泡等。 - **事件对象**：事件处理器可以访问到 `$event` 对象，以便获取触发事件的详细信息。 5. **Vue.js 中的表单...

jq阻止冒泡事件

lily2016n的博客

04-26

1115

阻止冒泡事件 **方式一：event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; $("#div1").mousedown(function(event){ return false;

jQuery阻止冒泡事件的方法

weixin_45676431的博客

04-07

2373

jQuery提供了两种阻止冒泡事件的方法方式一、event.stopPropagation() $(’#div1’).mousedown(function(event){ event.stopPropagation(); }); 方式二、return false $(’#div2’).mousedown(function(event){ return false; }); 注意： return ...

JQuery 阻止事件冒泡---3种实现方式

Nick.Peng's Blogs

09-20

8241

第一种：return false：缺点：直接返回了函数，函数后面的语句没法执行了； $('.btn').on('click',function(event){ do something ... return false }) 第二种：event.stopPropagation()： 1、阻止事件冒泡这里以click事件为例 <divclass="b...

jQuery阻止冒泡事件的几种方法

二师兄

04-20

2874

一、何为冒泡事件冒泡事件简单来说就是点击子节点，会向上触发父节点、祖先节点的点击事件。二、阻止事件冒泡可以通过以下三种方法做到不同程度的阻止。 1、return false (In event handler ,prevents default behavior and event bubbing ) return false 在事件的处理中，可以阻止默认事件和冒泡

jquery阻止事件冒泡的两种方法

热门推荐

Richard.Dai的专栏

12-07

1万+

事件的旅程：当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。以下面的页面模型为例： 1. 2. 3. 下午茶-网页前端 4. 5.jquery事件冒泡-下午茶-网页前端 6. 当在浏览器中形象化地呈现这些由嵌套的代码构成的元素时，我们看到的效果其实是这样的。举例来说，如果单击

JQuery 之阻止事件冒泡

Nick.Peng's Blogs

09-20

717

事件冒泡：子级触发的事件会逐层向父级传递(冒泡) ,这种现象称为事件冒泡事件冒泡的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件阻止事件冒泡：方式一：在事件处理命令中添加return false即可，可以阻止默认事件和冒泡事件；方式二：event.stop...

jq 阻止事件冒泡（点击子级＜div＞不触发父级＜div＞）

BlizzardWu的博客

06-25

1058

1:关于事件冒泡事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。） 2:如何避免冒泡 1: 使用 event.cancelBubble=true; <div class="box1" id="box1" onclick="change_cong(2)" > <div class="box2" id="bo

jquery 阻止事件冒泡

小鹰信息技术服务部

06-21

1093

有个表格，其中的信息是文件列表，点一行，这行会变色，点文件名链接可下载文件。实际情况是点了文件名链接，这行颜色也变了。现在需要在点了文件链接时这行不变色，也就是不触发行的click事件。想起事件冒泡模型，找到了解决办法： event.stopPropagation() $scope.download = function (id) { event.stopPropagati...

jquery中阻止事件冒泡的方法

weixin_34379433的博客

01-25

200

2019独角兽企业重金招聘Python工程师标准>>> ...