div嵌套div ，点击子级div不触发父级div点击事件

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

#jquery

本文介绍了一种解决网页中点击事件冒泡问题的方法。通过为子元素添加事件监听器并设置cancelBubble属性为true，可以有效阻止点击事件向上级元素传播，避免触发不必要的跳转行为。

情况如下：  

  <div class="footfixed" style="cursor:pointer" onclick="toAdvertDetail('${appPath}home/showNewsDetail?newsId=4');" >
<div class="close" onClick="event.cancelBubble = true"> </div>
   </div>
<!-- 底部悬浮end -->


   外层的div有一个点击跳转事件，按钮div也是一个点击事件用来隐藏整个div，产生的问题是，点击了关闭按钮了同事会触发父级div的跳转事件，



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

咖啡加糖_
关注
div嵌套html不用iframe
09-28
在网页设计和开发中，有时候我们需要在不使用`...通过以上步骤和知识点，我们可以在不使用`iframe`的情况下，利用`div`和jQuery实现页面内容的嵌套，这不仅可以提高网页性能，还能更好地控制和定制页面的显示效果。
不使用iframe的HTML嵌套div方法
07-06
例如，可以将一个函数绑定到ID为button的元素上，当用户点击该按钮时，触发事件处理器。 .load()是jQuery的一个便捷方法，可以从服务器加载数据，并将返回的数据插入到指定的元素中。例如，使用.load()将index.jsp的...
嵌套div中点击子元素，阻止父元素事件的两种方法
慢慢爬
11-18 3171
嵌套div中点击子元素，阻止父元素事件的两种方法
一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
setsunadoudou的博客
10-08 4316
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="di...
问题：父层div和子层div点击事件冲突，子层点击事件被父层点击事件所遮挡
虎康的博客
04-10 1398
另一种方法是在父层的点击事件处理程序中调用 event.preventDefault() 方法来阻止默认行为，这样父层点击事件就不会触发，而子层的点击事件会正常执行。你可以在子层的点击事件处理程序中调用 event.stopPropagation() 方法来阻止事件冒泡，这样点击子层时就不会触发父层的点击事件了。你可以根据具体情况选择使用其中的一种方法来解决父层和子层点击事件的冲突问题。父层div和子层div点击事件冲突，子层点击事件被父层点击事件所遮挡。
触发子元素的点击事件而不触发父元素的点击事件
langwang1993的博客
11-08 3203
&lt;div class="divone" onclick="divone(this)"&gt; &lt;div class="divchild" onclick="divchild(this)"&gt;&lt;/div&gt; &lt;/div&gt; function divone()
解决：点击子元素（子元素自己也绑定了事件）不触发父元素绑定的事件
chouchilei5210的博客
06-17 1021
问题代码： <div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;"> 父元素 <div class="elementII" style="heigh...
jQuery除指定区域外点击任何地方隐藏DIV功能
11-29
在给出的示例中，`$("#test").click()`事件中使用了`stopPropagation()`，目的是让点击`#test`时不触发在其之上的`document`的点击事件，从而避免`#test`被意外隐藏。 现在，让我们进一步探讨相关知识点： - **...
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
10-22
总之，通过本文对jQuery中toggle方法实现点击触发DIV显示与隐藏问题的分析，我们可以学习到如何利用jQuery简化DOM操作和事件处理，以及如何在实际开发中处理常见的显示与隐藏问题。通过理解文档类型声明的重要性，...
如何让div span等元素能响应键盘事件操作指南
09-05
描述中提到的场景是开发者需要在一个可编辑的`div`内嵌套一个可编辑的`span`，并且希望`span`能够捕获并处理键盘事件。 在Web开发中，`div`和`span`是常见的布局和内容组织元素。默认情况下，这些元素并不直接接收...
前端div嵌套div ，点击子级div只触发自己的事件
ITCwg的博客
12-20 1267
解决方法： 在子级div上增加一个事件 onClick=“event.cancelBubble = true”，这样就可以只触发自身的点击事件了
两个重叠的div,点击内div而不触发外div的点击事件
热门推荐
WangSiTeng的博客
03-23 1万+
转自百度知道：http://zhidao.baidu.com/link?url=UOwLMdSMMvA1mBXhCyu_W3NIfzNHHPjLjoci54bK2Tz8ZfCqzuu84O-wJlpAwoEY_yANZDc3lb5pis5yC-A4OMxQU9S4n9qaxp0tDnfOWnO 很好的借鉴 function getEvent() {     if (docum
点击子元素事件不触发父元素事件
weixin_30325487的博客
05-12 211
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> ...
防止div上的按钮点击时触发div的点击事件
xiao.bai.bo.ke
05-15 1849
//如果提供了事件对象，则这是一个非IE浏览器 if(structureone && structureone.stopPropagation){ //因此它支持W3C的stopPropagation()方法 structureone.stopPropagation(); }else{ //否则，我们需要使用IE的方式来取消事件 window.event.can...
div里面嵌套div如何只响应子div的点击事件
从入门到放弃的博客
09-16 2217
https://blog.youkuaiyun.com/qq_42049516/article/details/81938818
嵌套点击事件只执行第一次
weixin_30663391的博客
07-21 162
如下点击“哈哈哈”的时候只触发f2也就是弹出2，不弹出1 <a onclick='f1()'><div><span onclick="f2(event)">哈哈哈 </span></div>1111111111</a> <script type="text/javascript"> function f1...
jq 阻止事件冒泡（点击子级＜div＞不触发父级＜div＞）
BlizzardWu的博客
06-25 1102
1:关于事件冒泡 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。） 2:如何避免冒泡 1: 使用 event.cancelBubble=true; <div class="box1" id="box1" onclick="change_cong(2)" > <div class="box2" id="bo
处理DIV元素嵌套情况下的事件响应
fyl_077的专栏
07-20 1108
DIV元素在嵌套情况下响应事件时会发生重叠，比如下例： 点击DIV0时只会响应DIV0的事件处理，但点击DIV1时会先响应DIV1事件，然后又响应DIV0事件。 这通常是不符合我们的要求的。怎么解决呢？ <div id="DIV0" style="background:blue;width:500px;height:100px;" align="center"  onclick="cl
绑定touch事件后click无效，vue项目解决棒法
weixin_33895475的博客
03-28 2562
VueTouch 在vue项目中 VueTouch.config.swipe = { direction: 'horizontal'} Vue.use(VueTouch, { name: 'v-touch'}) <v-touch @panup="onPandup"> <div id="detailRightContainer"> ...
div容器点击触发方法
最新发布
10-01
<think>我们被要求回答关于div容器点击触发方法的实现方式，并参考了四个引用。 引用[1]展示了如何使用jQuery来检测点击事件是否发生在特定的子元素上，从而决定触发哪个div的事件。 引用[2]描述了如何实现一个搜索框获得焦点时显示一个div容器，并在点击页面其他地方时隐藏该容器的步骤。 引用[3]提供了两个Vue.js的例子，一个使用@click.stop来阻止事件冒泡，另一个在方法中调用event.stopImmediatePropagation()来阻止事件冒泡。 引用[4]展示了如何使用JavaScript实现点击按钮触发DIV滚动框上滚或下滚。 根据这些引用，我们可以总结出几种div容器点击触发方法的实现方式： 1. 使用JavaScript/jQuery直接绑定事件，并通过判断事件目标（event.target）来决定执行哪个事件处理程序（如引用[1]）。 2. 使用事件委托，在父元素上绑定事件，然后根据事件目标来执行不同的操作（类似引用[1]）。 3. 使用事件冒泡和阻止事件冒泡（如引用[3]），在子元素上阻止事件冒泡，使得点击子元素时不会触发父元素的点击事件。 4. 使用Vue.js的事件修饰符（如.stop）来阻止事件冒泡（如引用[3]）。 5. 在需要控制显示/隐藏div的场景（如引用[2]），通过绑定焦点事件和页面点击事件来实现。 因此，我们可以给出以下几种常见的实现方式： 方式一：使用原生JavaScript实现事件委托 - 在父元素上绑定点击事件，通过判断事件目标来执行对应的操作。 方式二：使用jQuery实现（如引用[1]） - 使用jQuery的click事件，并通过is()方法判断事件目标。 方式三：使用Vue.js并阻止事件冒泡（如引用[3]） - 在子元素的点击事件上使用.stop修饰符，或者在子元素的事件处理函数中调用event.stopPropagation()。 方式四：单独绑定事件并处理冒泡 - 给父元素和子元素分别绑定点击事件，在子元素的事件处理函数中阻止事件冒泡，这样点击子元素时就不会触发父元素的事件。 此外，引用[2]还提供了一种典型的应用：点击显示一个div，点击页面其他地方隐藏。这种方式通常需要给document绑定点击事件，然后判断点击的目标是否在需要显示的div内部，如果不是则隐藏。 下面我们分别用代码示例来说明： 注意：根据用户的要求，我们使用中文回答，并且按照指令对数学公式使用$...$或$$...$$格式（但在这个问题中没有数学公式，所以不需要），同时生成相关问题。 由于用户要求尽可能参考用户上一次的问题和回答，但这里没有提供上一次的问题和回答，所以我们只根据当前引用和问题来回答。 </think>### Div容器点击触发方法的实现方式 根据引用资料，div容器点击触发主要有以下几种实现方式： #### 1. **事件委托与目标检测（原生JS/jQuery）** 通过判断点击事件的实际目标元素来触发不同容器的行为： ```javascript // jQuery实现 $('#div1').click(function(e){ if($(e.target).is('#div2')) { alert('div2触发'); } else { alert('div1触发'); } }); // 原生JS实现 document.getElementById('div1').addEventListener('click', function(e) { if(e.target.id === 'div2') { alert('div2触发'); } else { alert('div1触发'); } }); ``` **适用场景**：嵌套容器需要区分点击区域时[^1]。 #### 2. **阻止事件冒泡（Vue.js）** 使用`.stop`修饰符或`event.stopPropagation()`阻止子元素事件冒泡到父容器： ```html <!-- Vue模板 --> <div class="box1" @click="clickBox1"> box1 <div class="box2" @click.stop="clickBox2">box2</div> </div> <!-- 或JS内阻止 --> <div class="box2" @click="clickBox2"></div> <script> clickBox2(event) { event.stopPropagation(); // 阻止冒泡 alert('box2触发'); } </script> ``` **优势**：避免嵌套容器的级联触发[^3]。 #### 3. **焦点与全局点击控制** 实现点击搜索框显示容器，点击外部隐藏： ```javascript // 显示容器 searchInput.addEventListener('focus', () => { resultDiv.style.display = 'block'; }); // 点击页面其他区域隐藏 document.addEventListener('click', (e) => { if (!resultDiv.contains(e.target) && e.target !== searchInput) { resultDiv.style.display = 'none'; } }); ``` **核心逻辑**：`contains()`方法检测点击是否在目标容器内[^2]。 #### 4. **滚动控制触发** 通过点击按钮控制容器滚动： ```javascript // 向下滚动 downButton.addEventListener('click', () => { const container = document.getElementById('scrollDiv'); container.scrollTop += 50; // 每次滚动50px }); // 自动滚动（示例） let timer = setInterval(() => { container.scrollTop += 2; }, 100); ``` **典型应用**：消息列表自动滚动、阅读进度控制[^4]。 --- ### 实现选择建议 | 场景 | 推荐方案 | 关键API | |------|----------|---------| | 嵌套容器区分点击 | 事件委托 + `e.target`检测 | `event.target`, `Element.is()` | | 阻止父子容器事件穿透 | 事件冒泡阻止 | `event.stopPropagation()`, `@click.stop` | | 浮层显隐控制 | 全局点击检测 | `document.addEventListener`, `Element.contains()` | | 滚动控制 | 修改`scrollTop`属性 | `element.scrollTop`, `setInterval` | > 提示：移动端开发需额外注意`touch`事件兼容性。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值