前端div嵌套div ，点击子级div只触发自己的事件

最新推荐文章于 2023-03-27 10:04:04 发布
原创 最新推荐文章于 2023-03-27 10:04:04 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #jquery #html #css

本文介绍了一种阻止事件冒泡的方法，即在子级 div 上使用 onClick 事件设置 event.cancelBubble=true，以确保仅触发该元素本身的点击事件。

解决方法： 在子级div上增加一个事件 onClick=“event.cancelBubble = true”，这样就可以只触发自身的点击事件了

js、jquery实现多个div绑定点击事件,点击一个div使边框选中,其他div取消边框选中
zcc的博客
03-18 2679
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击边框选中，取消其他选中</title> <style> div { width: 100px; height: 100px; backgrou..
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
10-22
具体到我们的标题所提到的“jQuery基于toggle实现click触发DIV的显示与隐藏问题分析”，这涉及到两个核心点：点击事件的触发以及使用toggle方法实现状态切换。click事件是JavaScript中最重要的事件之一，它在用户用...
div里面嵌套div如何只响应子div的点击事件
从入门到放弃的博客
09-16 2214
https://blog.youkuaiyun.com/qq_42049516/article/details/81938818
触发子元素的点击事件而不触发父元素的点击事件
langwang1993的博客
11-08 3202
&lt;div class="divone" onclick="divone(this)"&gt; &lt;div class="divchild" onclick="divchild(this)"&gt;&lt;/div&gt; &lt;/div&gt; function divone()
div嵌套div ，点击子级div不触发父级div点击事件
热门推荐
jimmy609的专栏
12-06 2万+
情况如下：             外层的div有一个点击跳转事件，按钮div也是一个点击事件用来隐藏整个div，产生的问题是，点击了关闭按钮了同事会触发父级div的跳转事件， 解决方法： 在子级div上增加一个事件 onClick="event.cancelBubble = true"，这样就可以只触发自身的点击事件了
div嵌套点击事件,div嵌套点击阻止冒泡
讓之的博客
08-22 7776
页面中嵌套的两个div都存在点击事件，当点击内部div阻止外部div点击事件的发生； 需要注意的一点，在实际的页面中可能中间有多层嵌套关系，像下图，在div1和div2中间可能还会有几层嵌套关系，这就不一定非要在要点击的子元素div2上加监听事件，可以再往上取一级或多级，只要在条件的div1元素下就可以，具体因需要而定。 方式1： //1.正常的情况下使用 $("#div2").cli.........
div嵌套html不用iframe
09-28
在例子中，我们绑定了一个函数到ID为`button`的元素上，当用户点击该按钮时，会触发事件处理器。 5. **jQuery的`.load()`函数** `.load()`是jQuery的一个便利方法，用于从服务器加载数据，并将返回的数据插入到...
如何让div span等元素能响应键盘事件操作指南
09-05
描述中提到的场景是开发者需要在一个可编辑的`div`内嵌套一个可编辑的`span`，并且希望`span`能够捕获并处理键盘事件。 在Web开发中，`div`和`span`是常见的布局和内容组织元素。默认情况下，这些元素并不直接接收...
不使用iframe的HTML嵌套div方法
最新发布
07-06
例如，可以将一个函数绑定到ID为button的元素上，当用户点击该按钮时，触发事件处理器。 .load()是jQuery的一个便捷方法，可以从服务器加载数据，并将返回的数据插入到指定的元素中。例如，使用.load()将index.jsp的...
jQuery除指定区域外点击任何地方隐藏DIV功能
11-29
当用户点击时，它获取触发事件的元素（`e.target`），然后检查这个元素是否是`#btn`或`#overlay`。如果都不是，那么它会检查`#overlay`元素是否可见，如果可见则将其隐藏。这里的`!target.is('#btn') && !target.is...
JQuery实现点击里层div事件，不触发外面的div的点击事件
u013954206的博客
03-03 4107
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现点击里层div事件，不触发外面的div的点击事件</title> </head> <body> <div id="outter" styl...
Vue.js 在组件上添加click事件，不触发组件内的事件，只触发在组件上添加的事件
m0_53397360的博客
03-27 1450
component1组件中存在jumpHome()事件，点击会触发，同时给component1添加jumpUrl事件，通过使用==@click.native.capture.stop==只触发组件上添加的事件不出触发组件内的事件。3、@click.native 侦听组件根元素上的原生事件。2、@click.capture 优先触发。1、@click.stop 阻止事件冒泡。
解决上层div遮挡下层div时无法触发click,hover等事件的问题
qq_35703552的博客
01-17 2991
（也就是上面图中的leftAngel和rightAngel俩个元素）设置pointer-events: none;时，就可以触发底层元素的click,hover等事件了。比如这个自定义的漏斗组件，当我们想要为展示不开的数据增加tip提示时发现，下面的元素被上层元素遮挡，导致事件无法透传。
实现点击自身元素而不是子元素触发的js条件
qq_38694034的博客
04-26 3216
如下：点击子元素时候不想触发<style>#parent{background: pink;width:50%;}#child{background: orange;height:300px;width: 300px;}</style><div id="grandFather" onclick="a...
大盒嵌套小盒点击事件顺序
weixin_44707050的博客
03-24 1659
如上图，点击 +/-按钮的事件触发顺序为：+/-按钮 =》 大框事件 问题：当点击+/- ，数值改变， 之后触发了大框的点击事件，大框带的值又赋值，值恢复原样； 解决思路：点击大框后，再触发小框事件， 解决：给小框事件添加一个定时器，settimeout---10ms <template> <div class="template-paramconfig-container"> <div class="paramconfig-con..
DIV 包括另外一个DIV 点击里面的DIV不能触发外面的DIV事件
u011380813的专栏
12-01 5230
function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if(e && e.stopPropagation) { 　　 //因此它支持W3C的stopPropagation()方法 　　 e.stopPropagation(); } else { 　　 //否则，我们需要使用IE的方式来取消事件冒泡 　　 window.event.cance
阻止上层div触发点击事件，并触发下层div的点击事件
nayi_224的博客
12-19 6284
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="aa(1);" style="width: 200px;height: 20...
[原创]实现多层DIV叠加的js事件穿透
10-28 983
Flash里面有个很好的特性是，一个容器里，不存在实际对象的部分，不会阻拦鼠标事件穿透到下一层。 前端就不一样了，两个div层叠以后，上层div会接收到所有事件（即使这个div里面内容是空的，没有任何实际对象），下层div什么事件都接不到。 举个例子： 这个示意图中 C方块在A容器中（A容器边框为红色） D方块在B容器中（B容器边框为绿色） A B部分重叠，B在上层...
div内的button的click会触发两次(防止事件冒泡)
weixin_33758863的博客
05-15 287
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;阻止事件冒泡 &lt;/title&gt; &lt;script type="text/javascript"&amp
基于div模拟窗口操作的前端实现技术解析
需创建一个主`<div>`作为窗口容器，内部嵌套标题栏（header）、内容区（content）和按钮区域（如关闭、最小化按钮）。标题栏常用于触发拖拽操作，而边框或角落的小块区域可用于触发缩放。结构清晰有助于后续样式与...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值