25

CSS - 属性pointer-events: none; 在 Firefox 中运行良好，但在 Internet Explorer 9-10 中却不行。

有没有办法在 IE 中实现此属性的相同行为？有任何想法吗？

4

3 回答 3

21

来自 MDN 文档：

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

在此处阅读更多内容，基本上，pointer-events非 SVG（可缩放矢量图形）是非标准的。
如果您检查链接页面上的浏览器支持表（大约下降了三分之二），您会注意到非 svg 上的 IE 支持是ziltsh、jack squat 、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);

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

于 2013-07-03T07:17:53.200 回答
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;
}
于 2017-04-19T11:03:16.153 回答
4

从 API 来看，我认为 Rich Harris 的 Points.js 和Hands.js都没有提供对pointer-events: none 的支持。

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

于 2013-07-19T10:21:34.580 回答