"pointer-events: none"在IE9和IE10中无效。

Question

"pointer-events: none"在IE9和IE10中无效。

25

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

有没有一种方法可以在IE中实现与该属性相同的行为？有什么想法吗？

- Vladimir Potapov

如果您的意图是在ajax调用期间限制用户在页面上任何地方单击，您可以使用：**$('body').css({'cursor':'wait'});，当您想要返回到正常光标状态时，请使用：$('body').css({'cursor':'default'});**。 - shasi kanth

2017年2月：FYI 它在IE11上可以运行。 - Zeek2

3个回答

6

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

- artde

很棒的备选建议！谢谢 :) - falsarella

.action-container 应该具有 position: relative。不错的任何方式。 - Sampgun

4

从查看API来看，我认为Rich Harris的Points.js和Hands.js都不支持pointer-events: none。

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

指针事件Polyfill。

- Kent Mewhort

1

指针事件 API 与 pointer-events CSS 属性不同。 - Charlie

这个 polyfill 在 IE10 上不起作用。我在必应地图上进行了测试。 - Charlie

6

为什么需要使用jQuery来完成polyfill？！ - reid

如果你们中有任何年轻人真正想知道为什么，那是因为它是在2013年制作的，而jQuery在许多项目中被广泛使用。@reid - Kerry Johnson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elias Van Ootegem · Accepted Answer

根据MDN文档：

警告：在CSS中使用pointer-events处理非SVG元素属于实验性质。该功能曾经是CSS3 UI草案规范的一部分，但由于存在许多问题而被推迟到CSS4。

在此处阅读更多信息，基本上，在非SVG（可缩放矢量图形）上使用pointer-events是非标准的。
如果您在链接页面上检查浏览器支持表格（大约在页面下方的三分之二处），则会发现IE在非svg上的支持程度为零，并且不被支持。

经过一番搜索，我找到了这篇文章，可以通过使用图层来模拟行为，并且感谢这篇帖子，我找到了这个JS-bin可能会有所帮助......

然而，在IE（以及Opera和我所知道的所有浏览器）中，您可以简单地强制在元素上使用一种光标类型：

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);

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