[英]“pointer-events: none” does not work in IE9 and IE10
CSS - 属性pointer-events: none;
在Firefox中工作正常,但它不适用于Internet Explorer 9-10。
有没有办法在IE中实现此属性的相同行为? 有任何想法吗?
来自MDN文档:
警告:在CSS中为非SVG元素使用指针事件是实验性的。 该功能曾经是CSS3 UI草案规范的一部分,但由于许多未解决的问题,已被推迟到CSS4。
在这里阅读更多 ,基本上,非SVG(可缩放矢量图形)上的pointer-events
是非标准的。
如果您检查链接页面上的浏览器支持表(大约三分之二),您会注意到非svg上的IE支持是ziltsh , jack squat , naut ,...不支持,即。
经过一番挖掘,我确实遇到过这篇文章 ,它允许你通过使用图层模仿行为,并且,由于这篇文章 ,我发现这个JS-bin可能会有所帮助......
但是,在IE(以及Opera和AFAIK所有浏览器)中,您只需在元素上强制使用一种光标:
a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
cursor: default;/*plain arrow*/
text-decoration: none;/*No underline or something*/
color: #07C;/*Default link colour*/
}
结果应该与pointer-events: none;
的结果非常相似pointer-events: none;
更新:
如果你想阻止IE中的点击事件,正如shasi指出的那样,在其他浏览器中被阻止,只需添加一个委托click事件的事件监听器。
我会认为,此刻,让您指定的所有a
元素:
var handler = function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'a')
{
if (!e.preventDefault)
{//IE quirks
e.returnValue = false;
e.cancelBubble = true;
}
e.preventDefault();
e.stopPropagation();
}
};
if (window.addEventListener)
window.addEventListener('click', handler, false);
else
window.attachEvent('onclick', handler);
这应该可以防止锚元素上的所有点击事件。
对于糟糕的IE10,还有另一种解决方案,例如:
/* must be over the element that have the action */
.action-container:after {
content: ' ';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 250;
background-color: grey; /* must have a color on ie10, if not :after does not exist... */
opacity: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.