“指针事件:无"不适用于 IE9 和 IE10 [英] "pointer-events: none" does not work in IE9 and IE10

问题描述

CSS - 属性 pointer-events: none;在 Firefox 中可以正常工作，但在 Internet Explorer 9-10 中不行.

The CSS - property pointer-events: none; works fine in Firefox, but it does not in Internet Explorer 9-10.

有没有办法在 IE 中实现此属性的相同行为?有什么想法吗?

Is there a way to achieve the same behaviour of this property in IE? Any ideas?

推荐答案

来自 MDN 文档:

警告:在 CSS 中为非 SVG 元素使用指针事件是实验性的.该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4.

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.

在这里阅读更多，基本上，pointer-events 是非标准的.
如果您检查链接页面上的浏览器支持表(大约三分之二)，您会注意到非 svg 的 IE 支持是 ziltsh、jack squat、naut,... 不支持，即.

Read more here, basically, pointer-events on 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, jack squat, naut,... not supported, that is.

经过一番挖掘，我确实遇到了这篇文章确实允许您通过使用层来模仿行为，并且，感谢 this发布，我发现这个JS-bin这可能有帮助...

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...

但是，在 IE(以及 Opera 和 AFAIK 所有浏览器)中，您可以简单地在元素上强制使用某种类型的光标:

However, in IE (and Opera, and AFAIK all browsers), you could simply force a type of cursor on an element:

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;

更新:

如果你想阻止 IE 中的点击事件，正如 shasi 指出的那样，在其他浏览器中被阻止，只需添加一个事件侦听器来委托点击事件.
目前，我假设您的目标是所有 a 元素:

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 a elements:

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.

这篇关于“指针事件:无"不适用于 IE9 和 IE10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！