"指针事件:无”;在IE9和IE10中不起作用

"pointer-events: none" does not work in IE9 and IE10

本文关键字：IE9 IE10 不起作用 指针 quot 事件      更新时间：2023-09-26

CSS属性pointer-events: none;在Firefox中运行良好，但在InternetExplorer9-10中则不然。

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

来自MDN文档：

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

在这里阅读更多，基本上，非SVG（可缩放矢量图形）上的pointer-events是非标准的
如果你查看链接页面上的浏览器支持表（大约三分之二向下），你会注意到非svg的IE支持是ziltsh、jack-stuck和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; 的结果非常相似

更新：

如果你想阻止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);

这应该可以防止锚点元素上的所有单击事件。

对于糟糕的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;
}

从API来看，我认为Rich Harris的Points.js和Hands.js都不支持指针事件：none。

因此，我刚刚实现了一个小脚本来polyfill这个特性：

  • 指针事件Polyfill
相关文章：