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

Posted 2023-03-05

【中文标题】“指针事件：无”在 IE9 和 IE10 中不起作用

【英文标题】："pointer-events: none" does not work in IE9 and IE10

【发布时间】：2013-06-30 18:40:39

【问题描述】：

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

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

【问题讨论】：

如果您的意图是限制用户在 ajax 调用期间点击页面上的任何位置，您可以使用：$('body').css('cursor':'wait ');，当你想恢复正常光标状态时，使用：$('body').css('cursor':'default');

二月。 2017：仅供参考，它适用于 IE11。

【参考方案1】：

来自 MDN 文档：

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

Read more here，基本上，非 SVG（可缩放矢量图形）上的 pointer-events 是非标准的。 如果您检查链接页面上的浏览器支持表（大约下降了三分之二），您会注意到非 svg 上的 IE 支持是 ziltsh、jack squat、naut,...不支持，也就是说。

经过一番挖掘，我确实遇到了this article，它确实允许您通过使用层来模仿行为，并且感谢this post，我发现this 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);

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

【讨论】：

但这仍然不能阻止 IE 中链接上的点击事件。

@Shasi：这个问题是关于 CSS 指针事件规则的。 CSS 也不会阻止点击事件

不，CSS 规则“pointer-events: none;”在 Firefox 和 Chrome 中确实阻止了元素上的点击事件。但它在 IE 中不起作用。 Here is a Demo

@shasi：添加了一个小 JS sn-p 来处理业务

这还是和pointer-events: none不一样。如果<a>下有可点击元素，它不会收到点击事件。如果<a> 具有pointer-events: none，则底层元素将接收该事件。

【参考方案2】：

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

因此，我刚刚实现了一个小脚本来填充此功能：

Pointer Events Polyfill。

【讨论】：

指针事件 API 与指针事件 CSS 属性不同。

这个 polyfill 在 IE10 中不起作用。我在 bing 地图上测试过

为什么需要 jQuery 作为 polyfill？！

@reid 如果你们中的任何一个年轻人真的想知道为什么，它是在 2013 年制作的，而且 jQuery 在许多项目中都没有使用。

【参考方案3】：

对于蹩脚的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。还是不错的。