问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

重叠的div，上层只遮挡下层颜色，不遮挡下层监听器，这样现实吗？

头像
littlealias
    441915
    <html>
<body>
    <div style="position:absolute;z-index:999;width:200px;height:200px;background:rgba(0,0,0,0.5)"></div>
    <div style="position:absolute;width:100px;height:100px;background:red" onclick="alert('Clickable!!')"></div>
</body>
</html>

    因为“显示”和“交互”的区域不完全一致，所以有了这个小白问题

    请问能够做到这种效果吗？

    cssjavascript前端101
    阅读 9.6k
    6 个回答
    得票最新
    头像
    新しい世界
      1.5k2621

      一个简单的css属性，在遮挡层设置：

      pointer-events: none;

      关于兼容性：

      clipboard.png

      IE 10+ 可放心使用，IE 10- 请尽情抛弃

      头像
      feibinyang
        178113

        把下层提升为上层，并设置背景为透明？

        头像
        Ganother
          152113

          其实这个问题不就是上层和下层都有点击事件么。。直接把上下层放到一个父元素加事件就可以吧

          头像
          佣才
            1353

            把上层和下层都放在一个大div里面，而点击事件绑定在这大div就好了

            头像
            xzavier
              7.1k417

              不太现实。因为DOM没有事件点穿的现象。
              但是，根据你的业务需求或者想要实现的效果肯定可以找到别的解决办法和实现方式。
              比如说，可以采用事件委托，委托给父元素，你可以试一下能不能达到你的效果。

              头像
              crp205
                3.9k3821

                上层绑定一个事件就可以了，假如下层的id是next;
                上层点击的回调函数里写上

                    document.getElementById("next").click();
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题