阻止上层div触发点击事件，并触发下层div的点击事件

最新推荐文章于 2024-04-10 17:32:27 发布
最新推荐文章于 2024-04-10 17:32:27 发布
阅读量5.5k 收藏 1
点赞数 2
分类专栏： 前端 文章标签： html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nayi_224/article/details/103616207
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div onclick="aa(1);" 
			style="width: 200px;height: 200px;border: 1px solid blue;"></div>
		
		<div onclick="aa(2);" 
			style="width: 120px;height: 120px;top: 0px;position: absolute;border: 1px solid red;z-index: 111;pointer-events: none;"></div>
		
	</body>
	<script type="text/javascript">
		
		function aa(num){
			alert(num);
		}
		
	</script>
</html>

在这里插入图片描述
红色div设置了z-index，在蓝色div的上面。

通常情况下，点击红色div是不会触发蓝色div的点击事件的，如果想屏蔽红色div的点击事件，需要像上面代码一样加上pointer-events: none;以阻止点击事件。

注：

  • pointer-events: none; 为css3语法，低版本ie不支持。
  • pointer-events: none; 实际阻止的是鼠标事件，hover等其他事件也会被一同阻止。
nayi_224
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何让图片相对于上层DIV始终保持水平、垂直都居中
09-25
正如标题所言图片与上层的div保持水平、垂直都居中，网上会搜索到很多类似标题的文章，不过大同小异，本文写了一个希望对大家有所帮助
如何解决上层div元素将下层div元素盖住，但是下层div里的点击事件仍可以进行的问题?
暴走的山交君的博客
10-13 3287
现在我们需要实现一个div文本输入框,其中含有button按钮在下层，上层div覆盖住下层div元素，上层div中同样含有一个button按钮的效果图。我们应该如何做来使下层div里的button点击事件有效果呢?一般来讲，两个div元素叠加在一起，只有上层的点击事件才起效果，但有时我们想要实现下层元素点击事件起作用。在解决这个问题之前，让我们先了解与解决这个问题有关的一些知识点。阻止CSS里的 hover 和 active 状态的变化触发事件。阻止JavaScript点击动作触发的事件。
html元素重叠 下面的元素仍然响应事件的解决
liuyikk163的专栏
12-09 5276
其实就是pointer-events和elementFromPoint 对于两个div，div a覆盖了div b，但是要让div b能够接收到鼠标的事件，有两种方法： 1.在firefox chrome等支持CSS3浏览器中，有个css属性叫pointer-events，设置div a的 pointer-events: none， 于是a上经过的所有鼠标事件都会过滤掉而不触发，
vue键盘按下事件_vue修饰符可能是东半球最详细的文档（滑稽）
weixin_33594662的博客
01-26 823
前端媛猿读完需要8分钟速读仅需 5分钟作者：李大雷https://segmentfault.com/a/1190000016786254为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~目录表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符(实在不知道叫啥名字)表单修饰符填写表单，最常用的是什么？input！v-mo...
上层盒子覆盖下层盒子，触发下层点击事件
weixin_43880497的博客
02-26 1598
给上层盒子添加pointer-events: none;属性
vue外层div上有点击事件，内层div也有点击事件，想要实现点 内层div，不触发外层点击事件（综合一下记录）
Winsom1的博客
06-15 4370
综合笔记，感谢原作者
如何阻止div中的子div触发div的事件
weixin_30703911的博客
09-26 158
<div class="sideFrame" v-on:click="hideside"> <div class="sideFrameDiv" v-on:click.stop="test"> </div> </div> <script> hideside:function(){ ...
透过上层div点击下层div
by_side_with_sun的博客
06-27 991
在上层div中设置：pointer-events: none; 如果希望上层也可以点击：pointer-events: auto;
解决上层div遮挡下层div时无法触发click,hover等事件的问题
qq_35703552的博客
01-17 2322
（也就是上面图中的leftAngel和rightAngel俩个元素）设置pointer-events: none;时，就可以触发底层元素的click,hover等事件了。比如这个自定义的漏斗组件，当我们想要为展示不开的数据增加tip提示时发现，下面的元素被上层元素遮挡，导致事件无法透传。
jQuery中阻止冒泡事件的方法介绍
12-01
比如：div下的a都有click事件，点击a的时候，会alert出现2次。这个现象叫做冒泡事件。 这个事件从原始元素开始一直冒泡到DOM树的最上层。目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中...
PyQt5 QLabel实现自定义鼠标点击事件
05-27
# PyQt5 QLabel实现自定义鼠标点击事件 1. 继承QLabel类并重定义鼠标点击事件mousePressEvent; 2. 鼠标点击获取光标在标签内的坐标，显示在标签上； 3. 多个标签使用QGridLayout布局。
Android编程实现ListView中item部分区域添加点击事件功能
01-05
本文实例讲述了Android编程实现ListView中item部分区域添加点击事件功能。分享给大家供大家参考，具体如下： 需求如题目：Android listview中item部分区域添加点击事件，在一个界面显示了listview，但显示的内容分为...
Vue之基础语法
hcyxsh的博客
04-01 157
Vue之基础语法 一 指令属性的基本使用 1. v-cloak解决闪烁 （1）解决插值表达式的闪烁问题。 （2）闪烁问题：在页面加载的过程中，在页面中的{{}}插值表达式首先会被页 面认可为是html元素中的实在存在的内容。所以浏览器会首先将{{}} 展现在页面上，页面加载完毕后，插值表达式{{}}才会真正的转变为 动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的 过程中，网速较慢（网络比较卡），那么我们的{{}}会首先展现出来， {{}}展现出来之后，会一闪而过，最终显示的是最终被赋予的值 2
Vue的事件处理，点击事件
qq_46149597的博客
11-03 1万+
vue点击事件，事件处理：事件修饰符、按键修饰符、鼠标修饰符、v-bind修饰符、v-model修饰符
问题：父层div和子层div点击事件冲突，子层点击事件被父层点击事件所遮挡
最新发布
虎康的博客
04-10 411
另一种方法是在父层的点击事件处理程序中调用 event.preventDefault() 方法来阻止默认行为，这样父层点击事件就不会触发，而子层的点击事件会正常执行。你可以在子层的点击事件处理程序中调用 event.stopPropagation() 方法来阻止事件冒泡，这样点击子层时就不会触发父层的点击事件了。你可以根据具体情况选择使用其中的一种方法来解决父层和子层点击事件的冲突问题。父层div和子层div点击事件冲突，子层点击事件被父层点击事件所遮挡。
让div与另一个div覆盖
justforuse的博客
11-24 8495
转载地址：http://www.52jscn.com/web/2013/07/4644.shtml这里笔者想把一个div层覆盖在另一个div之下或者之上，这里指需要增加一个css属性就可以解决：<DIV STYLE="position:absolute;left=10;top=20"> 你的内容</DIV><DIV STYLE="position:absolute;left=15;top=25">
vue2/3点击区域外触发方法(超简单，秒会)
qq_42405304的博客
09-11 4402
此时，点击绑定该方法外的区域就会触发该方法啦。全局注册指令的话用起来更方便，不用再用原生单独一个个绑定了。
thymeleaf中[[${}]]与[(${})]的区别
热门推荐
nayi_224的博客
10-29 1万+
[[…]]会被转义，[(…)]不会。 假设在后台传入msg的值为 <b>AAA</b> 在前台这样使用 [[${msg}]]___[(${msg})] 则最终的效果会是这样 官方文档 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#inlining ...
android 上层布局禁止下层点击事件
05-25
你可以在上层布局中设置一个透明的 View，并将其设置为可点击，然后将下层布局的点击事件拦截掉。具体做法如下： 1. 在上层布局中添加一个透明的 View，设置其宽高为 match_parent。 2. 将这个 View 设置为可点击，即设置 clickable 为 true。 3. 在下层布局中设置一个 OnTouchListener，拦截其点击事件。 4. 在 OnTouchListener 中判断该事件是否在上层布局的 View 上发生，如果是，则返回 true，表示已处理该事件，否则返回 false，表示未处理该事件。 示例代码如下： ``` // 上层布局 <FrameLayout android:id="@+id/layout_top" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/view_clickable" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" /> <!-- 其他布局内容 --> </FrameLayout> // 下层布局 <FrameLayout android:id="@+id/layout_bottom" android:layout_width="match_parent" android:layout_height="match_parent" android:onTouchListener="onBottomTouchListener"> <!-- 其他布局内容 --> </FrameLayout> // 下层布局 OnTouchListener public boolean onBottomTouchListener(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { int x = (int) event.getRawX(); int y = (int) event.getRawY(); Rect rect = new Rect(); mTopView.getGlobalVisibleRect(rect); if (rect.contains(x, y)) { return true; } } return false; } ``` 其中，mTopView 是上层布局中的 View，可以通过 findViewById(R.id.view_clickable) 获取。在下层布局中，可以通过设置 android:onTouchListener 属性为 onBottomTouchListener 来添加 OnTouchListener。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值