pointer-events属性

http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

在上层的div中加入这个属性,pointer-events:none; 能很好的解决这个问题。

pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值:auto

适用于:所有元素

继承性:有

动画性:否

计算值:指定值

取值:

auto:
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none:
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

说明:

设置或检索在何时成为属性事件的target。

  • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。
  • 对应的脚本特性为pointerEvents

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-10.0 2.0-3.5 4.0+ 6.0 15.0 6.0 2.1+ 18.0+

如何使上层的div遮住的链接可以点击的更多相关文章

  1. Html中DIV成为超级链接,解决在360浏览器+IE9显示小手图标的兼容性!

    Html中DIV成为超级链接,解决在360浏览器+IE9显示小手图标的兼容性! <div style="cursor:pointer;" onclick="sele ...

  2. 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  3. 转:alphaImageLoader滤镜加载后 链接不能点击

    我是一个很少使用IE滤镜,也是一个不赞成使用IE滤镜的前端工程师.不过今天有一个朋友给我发来了一个有关于IE6的BUG,就是在IE6中使用了AlphaPNG透明的IE滤镜之后,a链接不能够点击.具体情 ...

  4. 假设拦截WebView的错误和OS升级到4.4后链接不能点击的问题

    android OS升级到4.4之后,有些WebView的链接我们点击无效了,以下能够解决当中的某一种情况: webviewClient的shouldOverrideUrlLoading方法必须返回f ...

  5. 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG

    大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...

  6. Android TextView中链接(link)点击事件的截取

    布局文件xml <TextView package com.jayce.testlink; import android.net.Uri; import android.os.Bundle; i ...

  7. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  8. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  9. div锚点链接跳转

    a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...

随机推荐

  1. jqeuery $.ajax 与后台jsone交互

    ============================action后台,我这里是SpringMVC================================================@C ...

  2. 第三章TP-Link 703N OpenWrt设置网络

    默认情况下不开启wifi,另外需要连接到网络来安装软件,所以需要修正配置文件. 可以用vi修改相关配置(不会用vim的同学悲剧了). 首先修改/etc/config/wireless文件,注释掉 # ...

  3. 转载:如何利用Vim进行Erlang开发

    转自:http://ovalpo.info/how_to_use_vim_for_erlang_dev/ 如何利用Vim进行Erlang开发 by Martin J. Logan on Septemb ...

  4. uva167 - The Sultan's Successors

      题意:八皇后问题的扩展.8*8棋盘上每个格子都有一个整数,要求8个皇后所在格子的数字之后最大 解法一,回溯: 用vis数组记录 列,主对角(y-x), 副对角(y+x) 访问情况 #include ...

  5. Win7环境下VS2010配置Cocos2d-x-2.1.4最新版本号的开发环境

    写这篇博客时2D游戏引擎Cocos2d-x的最新版本号为2.1.4,记得非常久曾经使用博客园博主子龙山人的一篇博文<Cocos2d-x win7+vs2010配置图文具体解释(亲測)>成功 ...

  6. 修改MyEclipse内存-------OutOfMemoryError错误

    1.打开MyEclipse后,进入Windows/Preferences/Java/Installed JREs 点击后,在右边窗口选择JREs,双击后进入 2.在Default VM Argumen ...

  7. 如何用C#语言构造蜘蛛程序

    "蜘蛛"(Spider)是Internet上一种很有用的程序,搜索引擎利用蜘蛛程序将Web页面收集到数据库,企业利用蜘蛛程序监视竞争对手的网站并跟踪变动,个人用户用蜘蛛程序下载We ...

  8. A. Fox and Box Accumulation

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  9. Timing advance of GSM(时间提前量)

    基本概念 时间提前量TA(Timing Advance)的作用是为了补偿电波传输延迟,而根本目的则是为了提高信道编解码效率.由于GSM采用TDMA,每载频8个时隙,应严格保持时隙间的同步,没有TA就无 ...

  10. javascript exec方法

    题目 取出 "[大哭][尴尬][发怒][发怒][调皮][调皮][呲牙]" 串中[]里面的东西 思路 正则匹配,/\[(.+?)\]/ig; exec方法循环 exec() 方法的功 ...