css ‘pointer-events’ 属性替代 IE

问题描述

我有一个下拉导航菜单，其中一些标题不应该导航到其他页面，当点击 (这些标题打开一个下拉菜单，当点击)，而其他人应该导航 (这些没有下拉列表和直接导航) 。然而，两者类型为它们定义了 href

为了解决这个问题，我为前一种类型的标题添加了以下 css

pointer-events: none;

并且它工作正常。但由于此属性不被 IE 支持，我正在寻找一些 work-around 。令人讨厌的是，我没有访问权限，完全改变了 HTML 和 JavaScript 代码。

有任何想法吗？

最佳解决方案

Pointer-events 是一个 Mozilla 黑客，它已经在 Webkit 浏览器中实现，您不能指望在 IE 浏览器中看到另外一百万年。

然而，我找到了一个解决方案：

Forwarding Mouse Events Through Layers

这使用一个插件，它使用一些不太了解/理解的 Javascript 属性来取代鼠标事件并将其发送到另一个元素。

还有另一个 Javascript 解决方案 here 。

2013 年 10 月的更新：显然是在 v11 中来到 IE 。 Source 。谢谢蒂姆

次佳解决方案

有一个解决方法为 IE – 使用内联 SVG 并设置在 SVG 中的 pointer-events = “none” 。看到我的答案在 How to make Internet Explorer emulate pointer-events:none?

第三种解决方案

这是另一个解决方案，它使用 5 行代码非常容易实现：

捕获顶级元素的’mousedown’ 事件 (要关闭指针事件的元素) 。
在’mousedown’ 中隐藏顶级元素。
使用’document.elementFromPoint()’ 获取底层元素。
取消隐藏顶部元素。
为底层元素执行所需的事件。

例：

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

第四种方案

值得一提的是，专门针对 IE，disabled=disabled 适用于锚标签：

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE 将其视为 disabled 元素，不会触发点击事件。但是，disabled 不是锚标签上的有效属性。因此，这在其他浏览器中不起作用。对于他们，pointer-events:none 在造型中是必需的。

更新 1：所以添加以下规则感觉像一个 cross-browser 解决方案给我更新 2：为了进一步的兼容性，因为 IE 不会使用 disabled='disabled'形成锚标签的样式，所以它们仍然看起来很活跃。因此，a:hover{}规则和造型是一个好主意：

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

在 Chrome，IE11 和 IE8 上工作。当然，在 CSS 之上，假定使用 disabled="disabled"渲染锚标签

第五种方案

这是一个实现此功能的小脚本 (灵感来自 Kyle 提到的 Shea Frederick blog article)：

Pointer Events Polyfill 。

第六种方案

我花了差不多两天找到解决这个问题的办法，最后我发现了这个问题。

这使用 javascript 和 jquery 。

(GitHub) pointer_events_polyfill

这可以使用 javascript plug-in 进行下载/复制。只需复制/下载该站点的代码，并将其保存为 pointer_events_polyfill.js 。将 javascript 包含到您的网站。

<script src="JS/pointer_events_polyfill.js></script>

将此 jquery 脚本添加到您的站点

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

并且不要忘记包括你的 jquery plug-in 。

有用！我可以点击透明元素下面的元素。我正在使用 IE 10. 我希望这也可以在 IE 9 及以下的工作。

编辑：当您单击透明元素下方的文本框时，使用此解决方案不起作用。为了解决这个问题，当用户点击文本框时，我使用焦点。

使用 Javascript：

document.getElementById("theTextbox").focus();

JQuery 的：

$("#theTextbox").focus();

这样可以将文本输入到文本框中。

第七种方案

用不可见块覆盖违规元素，使用伪元素：:before 或:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

因此，您点击父元素上的地址。没有好处，如果父母是可点击，否则可以正常工作。

参考文献

css ‘pointer-events’ property alternative for IE

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

css ‘pointer-events’ 属性替代 IE