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

IT技术 javascript html css internet-explorer
2021-02-27 17:08:57

CSS - 属性pointer-events: none; 在 Firefox 中工作正常,但在 Internet Explorer 9-10 中却没有。

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

3个回答

来自 MDN 文档:

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

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

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

@shasi:添加了一个处理业务的小 JS 片段
2021-04-18 17:08:57
@Shasi:这个问题是关于 CSS 指针事件规则的。CSS 也不会阻止点击事件
2021-04-21 17:08:57
但这仍然不能阻止 IE 中链接上的点击事件。
2021-04-25 17:08:57
不,CSS 规则“指针事件:无;” 确实阻止了 Firefox 和 Chrome 中元素上的点击事件。但它在 IE 中不起作用。这是一个演示
2021-04-29 17:08:57
这仍然与pointer-events: none. 如果有一个可点击的元素<a>,它不会收到click事件。如果<a>pointer-events: none,则底层元素将接收事件。
2021-05-13 17:08:57

对于蹩脚的 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;
}
.action-container 应该有position: relative总之不错。
2021-04-18 17:08:57
很棒的回退建议!谢谢 :)
2021-05-16 17:08:57

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

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

为什么需要 jQuery 来实现 polyfill?!
2021-05-04 17:08:57
这个 polyfill 在 IE10 中不起作用。我在 bing 地图上测试过
2021-05-05 17:08:57
指针事件 API 与指针事件 CSS 属性不同。
2021-05-12 17:08:57
@reid 如果你们中的任何一个年轻人真的想知道为什么,它是在 2013 年制作的,并且在许多项目中都没有使用 jQuery。
2021-05-12 17:08:57