[英]“pointer-events: none” does not work in IE9 and IE10
The CSS - property pointer-events: none;
CSS - 属性
pointer-events: none;
works fine in Firefox, but it does not in Internet Explorer 9-10. 在Firefox中工作正常,但它不适用于Internet Explorer 9-10。
Is there a way to achieve the same behaviour of this property in IE? 有没有办法在IE中实现此属性的相同行为? Any ideas?
有任何想法吗?
From the MDN docs: 来自MDN文档:
Warning: The use of pointer-events in CSS for non-SVG elements is experimental.
警告:在CSS中为非SVG元素使用指针事件是实验性的。 The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.
该功能曾经是CSS3 UI草案规范的一部分,但由于许多未解决的问题,已被推迟到CSS4。
Read more here , basically, pointer-events
on a non-SVG (Scalable Vector Graphic) is non-standard. 在这里阅读更多 ,基本上,非SVG(可缩放矢量图形)上的
pointer-events
是非标准的。
If you check the browser support table on the linked page (about two-thirds down) you'll note that IE support on non-svg's is ziltsh , jack squat , naut ,... not supported, that is. 如果您检查链接页面上的浏览器支持表(大约三分之二),您会注意到非svg上的IE支持是ziltsh , jack squat , naut ,...不支持,即。
After some digging, I did come across this article that does allow for you to mimic the behaviours through use of layers, and , thanks to this post , I found this JS-bin That might help... 经过一番挖掘,我确实遇到过这篇文章 ,它允许你通过使用图层模仿行为,并且,由于这篇文章 ,我发现这个JS-bin可能会有所帮助......
However, in IE (and Opera, and AFAIK all browsers), you could simply force a type of cursor on an element: 但是,在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*/
}
The result should be pretty similar to that of pointer-events: none;
结果应该与
pointer-events: none;
的结果非常相似pointer-events: none;
Update: 更新:
If you want to prevent the click events in IE that, as shasi pointed out, is prevented in other browsers, simply add an event listener that delegates the click event. 如果你想阻止IE中的点击事件,正如shasi指出的那样,在其他浏览器中被阻止,只需添加一个委托click事件的事件监听器。
I'll assume, at the moment, that you're targeting all a
elements: 我会认为,此刻,让您指定的所有
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);
That should prevent all click events on anchor elements. 这应该可以防止锚元素上的所有点击事件。
From looking at the APIs, I don't think Rich Harris' Points.js, nor Hands.js , provide support for pointer-events: none . 通过查看API,我不认为Rich Harris的Points.js和Hands.js都不支持指针事件:none 。
Thus, I just implemented a tiny script to polyfill this feature: 因此,我只是实现了一个小脚本来填充此功能:
For crappy IE10, there is another solution, example : 对于糟糕的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.