点击里面div或外面div的事件冒泡问题

最新推荐文章于 2024-06-09 00:06:15 发布
最新推荐文章于 2024-06-09 00:06:15 发布
阅读量2.9k 收藏 2
点赞数
分类专栏： js 文章标签： js事件 事件冒泡 stopPropagation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_19803127/article/details/80332773
版权 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div style="width: 400px;height: 400px;background-color: #678678;font:3em bold;" id="outDiv">
    out
    <div style="width: 200px;height: 200px;margin: 50px;background-color: #eaceac;font:1em bold;" id="inDiv">in</div>
</div>
    <script>
        document.getElementById("inDiv").addEventListener('click',function(e){
            alert('in');
            e.stopPropagation();//终止事件冒泡
        },false);
        document.getElementById("outDiv").addEventListener('click',function(e){
            alert('out');
        },false);
</script>

</body>
</html>

wujingj
关注
专栏目录
js基础知识（三十二）--事件的冒泡及div跟随鼠标移动小练习
weixin_47928499的博客
08-16 498
事件的冒泡及div跟随鼠标移动小练习
javascript事件冒泡
weixin_47591145的博客
11-27 191
事件冒泡就是指 事件的向上传导，当其后代事件被触发时，其祖先也会被触发 var box = document.getElementById("box") var box1 = document.getElementById("box1") box.onclick = function(event){ event = event || window.event alert("这是father") } box1.onclick = function(event){ event =
div嵌套点击事件,div嵌套点击阻止冒泡
讓之的博客
08-22 7529
页面中嵌套的两个div都存在点击事件，当点击内部div阻止外部div点击事件的发生； 需要注意的一点，在实际的页面中可能中间有多层嵌套关系，像下图，在div1和div2中间可能还会有几层嵌套关系，这就不一定非要在要点击的子元素div2上加监听事件，可以再往上取一级或多级，只要在条件的div1元素下就可以，具体因需要而定。 方式1： //1.正常的情况下使用 $("#div2").cli.........
【工作笔记】点击div中的内部元素，防止事件冒泡
戴璟昊的博客
10-16 2867
工作中遇到的一个需求，点击外部div跳转页面，点击div中的某个内部元素，跳转到另一个页面，之前没有处理过这种问题，上网查找了一些资料了解到，这里面涉及到事件的冒泡机制。
一个div盒子，两个点击事件，互不干扰，可以使用阻止事件冒泡
新人一枚，互相学习哦！
07-24 1459
阻止事件冒泡
在点击div中的p时，如何阻止事件冒泡
08-31
标题中的问题是如何在点击`<div>`中的`<p>`元素时，只触发`<p>`的点击事件而不触发`<div>`的点击事件。描述中给出了一个具体的示例，包含HTML、CSS和JavaScript代码，其中`<div>`和`<p>`元素都绑定了`onclick`事件，...
jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)
10-21
在上述例子中，点击"click"块时，会首先触发"click"块的点击事件，然后事件会冒泡到它的父元素，如果父元素上也有点击事件的监听器，那么这个监听器也会被触发。这就导致了一个问题：在"pop"层还未完全显示时，"page...
两个div叠加触发事件发生闪烁问题的解决方法
09-24
另外，尝试使用`e.stopPropagation()`来阻止事件冒泡，以及`e.preventDefault()`来阻止默认行为，这些并不能根本解决问题，因为它们只是控制事件的传播和行为，而不是避免事件的重复触发。 再试用`toggle`事件，...
事件捕获和事件冒泡
m0_63219422的博客
04-27 569
在介绍这两个流程时，首先要了解一下js很重要的概念：事件流。
事件冒泡（点击div外让div消失）
qq_38372358的博客
04-19 1360
var myDiv = $("#myDiv"); $(function() { $("#btn").click(function(event) { // showDiv();//调用显示DIV方法 $(myDiv).toggle(); $(document).one("click", function() { //对docum...
阻止子div js事件冒泡
Wanglas的博客
02-20 775
$('.account-list').on('click', '.account-btn', function (e) { e.stopPropagation(); ...... }) 这样就好了，父div的事件不会覆盖div了
事件冒泡机制
YY的博客
10-25 1180
事件的传递：标准事件流
事件冒泡、事件捕获和事件委托
study_way的博客
07-24 1415
事件冒泡（Event Bubbling）、事件捕获（Event Capturing）和事件委托（Event Delegation）是 JavaScript 中与事件处理相关的三个重要概念。它们涉及到事件在 DOM 树中传播和触发的方式。例如，如果你有以下 HTML 结构：</</并且给inner和outer元素都绑定了相同的点击事件，当你点击inner元素时，事件会从inner元素开始向上冒泡，同时触发outer元素的点击事件。在现代浏览器中，事件传播包括两个阶段：捕获阶段和冒泡阶段。
解决 父层div和子层div点击事件冲突 （冒泡触发的小方法）
qq_36423909的博客
08-10 7022
父模块和子模块点击事件（冲突解决方案）： HTML代码：         JS 代码： //父亲点击事件 $scope.parentClick = function () { } //孩子点击事件 $scope.childClick = function (event) {     event.stopPropagation();//终止事件冒泡
阻止div的点击事件冒泡
最新发布
weixin_66196770的博客
06-09 386
我的想法💡：点击内层的div我要执行自己内层div的change事件，但是不要触发外层div的点击事件。解决办法：一行代码搞定 onClick="event.cancelBubble = true"inactive-text="公开"active-text="隐私"情景：两个div是嵌套关系，大的div包住小的div。简单百度了下，发现是由于事件冒泡原因导致的。
HTML设置允许冒泡,html css hover也会冒泡
weixin_34675395的博客
06-19 1002
js实现表单验证 常用JS表单验证CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...android https正确调用方案(防中间人劫持)以下内容为原创,欢迎转载,转载请注明 来自博客园:http://www.cnblogs.com/joey-hua/p/497...
把一个div的值通过点击事件传到另一个div中
CongBird的博客
04-28 7564
 1、在第一个div中写一个onclick把value拿到 ','','','','')" /> 2、在定义的sendValue函数里设置第二个div的值 function sendValue(accountNumber, ServCode, CircNo, noOfMonths,sign) { document.getElementById("myModalLabel").
动态div点击事件传递对象参数格式-草稿889
weixin_30617561的博客
07-09 579
<button type='button' style='border: 1px solid #eeeeee;color: #717070;height: 20px;border-radius: 3px;line-height: 18px;' class='button cbtn' onclick='confirm(" + JSON.stringify(row).replace(/...
事件传递机制分析
showdy的博客
12-13 528
为什么要有事件传递: 我们知道View是树形结构,当Touch事件(TouchEvent)产生时,可以有多个View去响应,那么为了解决到底哪个View消费这个Touch事件,就出现了事件传递机制. View结构图如下: 处理事件传递相关方法: boolean dispatchTouchEvent(MotionEvent ev) 用来进行事件的分发.如果事件能够传递到当前View,该方法一定会调
js 一个div包裹两个div，事件冒泡如何执行
04-25
JS 中事件冒泡是从目标元素开始向上冒泡至 document 对象，可以通过 addEventListener() 添加事件监听器并设置第三个参数 useCapture 为 true/false 来控制事件捕获或冒泡。在一个 div 包含另外两个 div 的情况下，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值