看css发现一个pointer-events:none;的东西

最新推荐文章于 2023-05-25 16:06:39 发布
最新推荐文章于 2023-05-25 16:06:39 发布
阅读量80 收藏
点赞数
文章标签： javascript ViewUI 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS:pointer-events</title>
<style type="text/css">
    .overlay1 {
        width:80px;
        height:20px;
        background:gold;
        position:absolute;
        top:5px;
        left:5px;
        opacity:0.5;
    }
    .overlay2 {
        width:80px;
        height:20px;
        background:gold;
        position:absolute;
        top:40px;
        left:5px;
        opacity:0.5;
    }
    .pointer{pointer-events:none;}
</style>
<script type="text/javascript">
window.onload = function(){
    document.getElementById('chx').onclick = function(){
        document.getElementById('a').className 
            = "overlay1 " + ((this.checked)? "pointer" : "");
        document.getElementById('b').className 
            = "overlay2 " + ((this.checked)? "pointer" : "");
    }
}
</script>
</head>
<body>
    <div id="a" class="overlay1"></div>
    <div id="b" class="overlay2"></div>
    <a href="http://mail.sina.com.cn">SinaMail</a>
    <br/><br/>
    <span οnclick="alert(3);">SinaMail</span>
    <p>
        <input id="chx" type="checkbox">
        <label for="chx">开启穿透点击</label>
    </p>
</body>
</html>

http://www.cnblogs.com/snandy/archive/2011/03/17/1986807.html

weixin_33815613
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
09-24
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
el-select 结合 el-checkBox 实现下拉全选+多选功能
keke11211的博客
11-23 2466
实现效果如图所示： 具体代码如下： <!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能 --> <template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="
CSS pointer-events: none 去掉鼠标事件
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
pointer-events:none&pointer-events: auto
weixin_57071684的博客
05-25 1344
当 pointer-events 设置为 none 时,当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。换句话说,pointer-events: none 可以让一个元素无法响应用户输入事件,而保持原有的其他行为(如影响布局)。实现视差滚动效果。通过 pointer-events: none 使滚动层无法响应交互,实现粘性效果。实现遮罩层。pointer-events: none 可以使下层元素无法响应事件,产生遮蔽遮罩的效果。修复点击穿透问题。
pointer-events:none应用场景
a279534269的博客
10-30 576
创建一个产品的时候来联系点击会报主键冲图。解决方法用pointer-events:none，可以防止连续点击 简介 pointer-events: none 真是个神奇的属性。 该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说： pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了“浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个
CSS3 pointer-events:none应用举例及扩展
weixin_33816821的博客
12-14 564
一、pointer-events:none是？ pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用 理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto” 类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的...
css pointer-events属性实现下面元素可点击
12-09
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个... 将它应用到一个元素 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面
css不常见属性之pointer-events的使用方法
12-03
MDN 上介绍为 CSS 属性指定...pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events:
CSS的pointer-events属性详细介绍（作用和注意事项）
12-13
而本文要说的pointer-...这个pointer-events属性有很多可以使用的属性值，但大部分都是针对SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 in
css3 pointer-events 介绍详解
01-19
顾名思义，pointer-events 是一个用于 HTML 指针事件的属性。 pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。 默认值为 auto，语法： 复制代码代码如下: pointer-events: auto | none | ...
CSS3神奇的样式 pointer-events: none;解决JS鼠标事件穿透到子标签
热门推荐
九天翔龙的技术博客
04-11 1万+
最近做一个案例演示的时候，遇到个小问题。要获取鼠标相对标签（为了方便称呼，我们叫它parent标签）的坐标，当然要用到event.offsetX和event.offsetY。 不过，如果鼠标移动到（也可以是点击）parent的子标签（称呼它child）后，就尴尬了，event.offsetX 和 event.offsetY 就不再是相对 parent 的坐标了，而是相对 child的坐标。 举...
css 点击穿透 pointer-events: none；一般用于遮罩
weixin_42729938的博客
04-01 7337
通常我们用遮罩后会覆盖到一些需要点击的事件例如： <div class="demo" click="aaa">111</div> <div class="mask"></div> <style> .mask{ width:100%; height:100vh; background-color:rgba(0,0,0,.5); p
Css pointer-events: none 属性说明：
m0_65284931的博客
07-17 587
1、pointer-events: none 去除鼠标事件 pointer-events: auto 恢复除鼠标事件 用途，当我们想恢复定位下面按钮的点击事件时可以用到这个属性用法： 给定位的盒子设置 pointer-events: none ;给定位盒子有需要点击事件的子盒子设置 pointer-events: auto；这样就能解决 部分场景下的问题，如下图 购物车的固定定位盒子遮挡住下面的按钮，这种场景下就可以用到这个属性注：Opera在SVG中支持该属性但是HTML中不支持...
pointer-events: none；属性；看得见摸不着，点击穿透
qq_43610925的博客
08-08 542
pointer-events: none；属性；看得见摸不着，点击穿透
pointer-events: none——CSS实现禁用鼠标点击事件！巧妙解决ExtJs表格单行禁用功能！
Kuroko's Development Notes
12-20 3802
注：该篇更好的解决方案见：【解决方案】Ext.grid.CheckboxSelectionModel 实现锁住指定行不被选中   需求如下：   实现效果如下： 注：深灰色的背景色丑是丑了点，但是也正是这样才让前面的勾选框看上去不存在，实际上这个checkbox还是存在的，只是颜色正好被覆盖了。   实现方法如下： js中，对表格的 viewConfig 属性进行 getR...
pointer-events:none解决重叠元素不能感应鼠标事件的问题
web开发
07-03 861
Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素...
pointer-events: none点击穿透
weixin_38958405的博客
05-28 1505
第一次知道css这个属性，记录下咯! 使用这个属性，可以在点击某元素的时候，穿过该元素，点击到该元素下面的元素
【未解决】pointer-events:none无效 （CSS3）
Venchi的博客
04-30 3067
想实现一个li不可点击，使用pointer-events:none并没有效果，还是会冒泡到事件代理中。
pointer-events: none; pointer-events: auto;
最新发布
11-08
其中，pointer-events: none表示元素不会响应任何鼠标事件，而pointer-events: auto则表示元素会响应鼠标事件。除此之外，还有一些SVG专用的取值，如visiblePainted、visibleFill等，用于控制SVG元素的事件响应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值