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

拼搏现实的明天。 2021-09-23 13:48 889阅读 0赞

<!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>

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

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

**注：**

*  `pointer-events: none;` 为css3语法，低版本ie不支持。
 *  `pointer-events: none;` 实际阻止的是鼠标事件，hover等其他事件也会被一同阻止。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/14ccbc47a3a5454ca06931c343566f6e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，889人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 146 阅读

相关 vue 自动触发点击事件

需要，点击左边的菜单，顶部菜单相应改变，但是都需要点击事件，页面进来时，默认触发点击事件方法一，vue自定义指令 directives:{

Dear 丶/ 2023年01月12日 14:56/ 0 赞/ 220 阅读

相关 vue外层div上有点击事件，内层div也有点击事件，想要实现点内层div，不触发外层点击事件

vue有个属性是@click.stop="test()" 因为我写app，用[@tap][tap]（mui框架中app的点击事件），本来还以为不能用，后来试了下，好用的想

逃离我推掉我的手/ 2022年11月10日 00:57/ 0 赞/ 153 阅读

相关阻止点击事件

使用css样式阻止元素的点击事件 `.el{ pointer-events:none; }` 转载于:https://www.cnblogs.com/yinshiru/p

野性酷女/ 2022年10月02日 14:58/ 0 赞/ 181 阅读

相关禁用外层div点击事件

$(document).on('click', '.divClass', function(e) { e.stopPropagation();

怼烎@/ 2022年09月10日 06:15/ 0 赞/ 187 阅读

相关 iOS 代码触发button点击事件 objective-c怎么代码触发按钮点击事件

iOS 代码触发button点击事件 objective-c怎么代码触发按钮点击事件在项目中，为了方便首次进入之后，通过button的点击事件进行切换。这边代码实现点击

红太狼/ 2022年08月20日 04:23/ 0 赞/ 255 阅读

相关 div的鼠标点击事件

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]"> <head> <

怼烎@/ 2022年04月13日 11:22/ 0 赞/ 527 阅读

相关 div添加一个点击事件（绑定点击事件）

1、HTML onclick 事件属性 <input type="button" value="点我点我" onclick="ds()"> <script>

喜欢ヅ旅行/ 2021年09月24日 14:40/ 0 赞/ 622 阅读

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

拼搏现实的明天。/ 2021年09月23日 13:48/ 0 赞/ 890 阅读

相关 JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件

现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。![2016

心已赠人/ 2021年06月10日 20:41/ 0 赞/ 654 阅读