zoukankan      html  css  js  c++  java
  • css3 pointer-events(阻止hover、active、onclick等触发事件)

    pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

    /* Keyword values */
    pointer-events: auto;
    pointer-events: none;
    pointer-events: visiblePainted; /* SVG only */
    pointer-events: visibleFill;    /* SVG only */
    pointer-events: visibleStroke;  /* SVG only */
    pointer-events: visible;        /* SVG only */
    pointer-events: painted;        /* SVG only */
    pointer-events: fill;           /* SVG only */
    pointer-events: stroke;         /* SVG only */
    pointer-events: all;            /* SVG only */
    
    /* Global values */
    pointer-events: inherit;
    pointer-events: initial;
    pointer-events: unset;

    当此属性未指定时,visiblePainted值的相同特征适用于 SVG(可缩放矢量图形) 内容。

    除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

    初始值 auto
    适用元素 all elements
    是否是继承属性 yes
    适用媒体 visual
    计算值 as specified
    Animation type discrete
    正规顺序 the unique non-ambiguous order defined by the formal grammar

    pointer-events 更像是JavaScript,它能够:

    • 阻止用户的点击动作产生任何效果

    • 阻止缺省鼠标指针的显示

    • 阻止CSS里的 hover 和 active 状态的变化触发事件

    • 阻止JavaScript点击动作触发的事件

     

    实际代码使用中案例:

    1、提交页面,提交按钮点击后,添加这个样式属性(),来防止重复提交。 @camnpr

    2、一些层的绝对定位,覆盖按钮,穿透可以点击它。等等。

    来看下具体用法:

    pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

    pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

    pointer-events属性值详解

    • auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。

    • none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。

    • 其它属性值为SVG专用,这里不再多介绍了。

     

    浏览器兼容性

    Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持(IE11又支持,不过很好的一点是在ie中给a加disabled 点击事件自动无效。),Opera在SVG中支持。 但是 该属性HTML中 不支持 

  • 相关阅读:
    为Qtcreator 编译的程序添加管理员权限
    热备,冷备,云备
    最近面试java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备
    进入2012 -- 回顾我走过的编程之路
    为什么中国程序员水平一直上不了层次?无非是这些原因!
    我是如何失去团队掌控的?
    后端开发甩锅奥义
    一个线程oom,进程里其他线程还能运行吗?
    架构师必备,带你弄清混乱的JAVA日志体系!
    IDEA一定要改的八条配置
  • 原文地址:https://www.cnblogs.com/ypppt/p/12849239.html
Copyright © 2011-2022 走看看