"pointer-events:none"在IE9和IE10中不起作用

Question

CSS - 属性pointer-events: none; 在Firefox中运行良好,但在Internet Explorer 9-10中却没有.

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

Answer 1

来自MDN文档:

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

在这里阅读更多,基本上,pointer-events非SVG(可伸缩矢量图形)是非标准的.
如果您检查链接页面上的浏览器支持台(约三分之二向下),你会注意到,在IE浏览器支持非SVG的是ziltsh,杰克蹲下,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指出的那样,在其他浏览器中被阻止,只需添加一个委托click事件的事件监听器.
我现在假设你的目标是所有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);

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

Answer 2

对于蹩脚的 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;
}

Answer 3

通过查看API,我不认为Rich Harris的Points.js和Hands.js都不支持指针事件:none.

因此,我只是实现了一个小脚本来填充此功能:

• 指针事件Polyfill.