处理遮罩下面的元素无法触发点击事件

先说问题描述:

比如我现在的需求是做了一个轮播图.但是我在轮播图上面覆盖了一个iphone x的相框,

也就是可以理解为在轮播图的最上层覆盖了一个遮罩.

然后我再去拖拽轮播图时,发现无法拖拽了.

也就是我标题所描述的遮罩下面的元素无法触发点击事件.

解决方案1:
你可以点击遮罩的时候,触发下边元素的点击事件:

(".a").on("cllick",function(){(".b").click();
)

解决方案2:
把元素遮罩设置为子元素呢,把你想点击的作为父元素,
这样使用DOM的冒泡时间,当点击遮罩的时候,就能捕获到事件了.
但是有个问题,因为当前页面你可能有一个遮罩但是有多个点击事件,恩,酌情处理下吧

解决方案3:
添加pointer-events: none,你的遮罩盖住了下边的元素,所以你点击的事件其实是作用在了遮罩上面。而pointer-events: none可以穿透遮罩,点击到下面的元素。我刚做的项目用过这个属性,亲测有效。支持ie11及其他浏览器

解决方案4:
增加你要点击页面的z-index值

解决方案目前我总结的是有这四类. 平时开发中 基本够用了. 当然 ,你要根据你的需求选择对应的解决方案. 在这里 我是用 方案三 完美解决 相框内元素无法拖拽的问题的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,026评论 3 119
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,081评论 25 709
  • 站在阳光下,低到尘埃里
    四朝小卒阅读 75评论 0 0
  • 最初的记忆,放在心里最重要的地方,任时光匆匆,亦或是刷机格式化。它都保持着最美的样子,不曾遗忘或是丢失。 ...
    南天九茴阅读 480评论 3 4
  • 看见一句话,据说是泰森说的“在被打脸之前,每个人都有一个计划”。 当你兴致勃勃构思一个项目,热血沸腾投入执行,然后...
    Larissa阅读 147评论 0 0