Html “指针事件：无”在 IE9 和 IE10 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17441810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"pointer-events: none" does not work in IE9 and IE10
提问by Vova Potapov
The CSS - property pointer-events: none;works fine in Firefox, but it does not in Internet Explorer 9-10.
CSS - 属性pointer-events: none;在 Firefox 中工作正常，但在 Internet Explorer 9-10 中却没有。
Is there a way to achieve the same behaviour of this property in IE? Any ideas?
有没有办法在 IE 中实现此属性的相同行为？有任何想法吗？
采纳答案by Elias Van Ootegem
From the MDN docs:
来自 MDN 文档：
Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.
警告：在 CSS 中为非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。
Read more here, basically, pointer-eventson a non-SVG (Scalable Vector Graphic) is non-standard.
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, Hyman squat, naut,... not supported, that is.
在这里阅读更多，基本上，pointer-events非 SVG（可缩放矢量图形）是非标准的。
如果您检查链接页面上的浏览器支持台（约三分之二向下），你会注意到，在非SVG的IE支持ziltsh，Hyman蹲下，NAUT，...不支持，那是。
After some digging, I did come across this articlethat does allow for you to mimic the behaviours through use of layers, and , thanks to this post, I found this JS-binThat 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;
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.
I'll assume, at the moment, that you're targeting all aelements:
如果你想阻止 IE 中的点击事件，正如 shasi 指出的那样，在其他浏览器中被阻止，只需添加一个委托点击事件的事件侦听器。
目前，我假设您的目标是所有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.
这应该可以防止锚元素上的所有点击事件。
回答by artde
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;
}
