html中鼠标禁止点击,详解css3pointerevents（阻止hover、active、onclick等触发事件来...

pointer-events更像是Javascript&＃xff0c;它能够&＃xff1a;阻止用户的点击动作产生任何效果

阻止缺省鼠标指针的显示

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

阻止Javascript点击动作触发的事件

实际代码使用中案例&＃xff1a;

1、提交页面&＃xff0c;提交按钮点击后&＃xff0c;添加这个样式属性(style&＃61;"pointer-events")&＃xff0c;来防止重复提交。 &＃64;camnpr

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

来看下具体用法&＃xff1a;pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

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

&＃64;郑州网建

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

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

其它属性值为SVG专用&＃xff0c;这里不再多介绍了。

浏览器兼容性

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

原文链接&＃xff1a;http://outofmemory.cn/css/css3-pointer-events