Css 的“指针-事件”属性替代 IE

我有一个下拉式导航菜单，其中一些标题不应该导航到其他页面时点击(这些标题打开下拉式菜单时点击) ，而其他应该导航(这些没有下拉式和直接导航)。但是，这两种类型都定义了 href吗

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

pointer-events: none;

它工作的很好。但是由于这个属性不支持 IE，我正在寻找一些变通方法。 烦人的是 我没有权限改变 HTML 和 JavaScript 代码完全。

有什么想法吗？

175250 次浏览
小开
最佳答案

指针事件是一种 Mozilla 黑客技术，它已经在 Webkit 浏览器中实现了，你不能指望在 IE 浏览器中再看到它了。

然而，我找到了一个解决办法:

通过层转发鼠标事件

它使用一个插件，该插件使用 Javascript 的一些不为人熟知/理解的属性来获取鼠标事件并将其发送到另一个元素。

还有另一个 Javascript 解决方案 给你。

更新于2013年10月 : 显然它将在11版本的 IE 浏览器中出现。

小开

IE 有一个变通方法——使用内联 SVG 并在 SVG 中设置指针事件 = “ none”。 看看我的回答: 如何让 Internet Explorer 模拟指针事件: 没有？

小开

下面是一个实现这个特性的小脚本(受 Kyle 提到的 Shea Frederick 的博客文章的启发) :

小开

下面是另一个非常容易实现的解决方案，只需要5行代码:

  1. 捕获顶部元素(要关闭指针事件的元素)的“ mousedown”事件。
  2. 在“ mousedown”中隐藏顶部元素。
  3. 使用‘ document.elementFromPoint ()’获取基础元素。
  4. 取消隐藏顶部元素。
  5. 为基础元素执行所需的事件。

例如:

//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 : 所以添加以下规则对我来说就像是一个跨浏览器的解决方案

更新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"呈现的

小开

我找到了另一个解决这个问题的办法。如果浏览器窗口宽度大于1’000px，我使用 jQuery 将 href-属性设置为 javascript:;(不是’，否则浏览器将重新加载页面)。您需要向您的链接添加 ID。我是这么做的:

// get current browser width
var width = $(window).width();
if (width >= 1001) {


// refer link to nothing
$("a#linkID").attr('href', 'javascript:;');
}

也许对你有用。

小开

我花了将近两天的时间来寻找这个问题的解决方案，最后我找到了这个。

这使用了 javascript 和 jquery。

(GitHub)指针 _ events _ polyfill

这可以使用一个可以下载/复制的 javascript 插件。 只要复制/下载该网站的代码，并保存为 pointer_events_polyfill.js。包括该 javascript 到您的网站。

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

将这个 jquery 脚本添加到您的站点

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

不要忘记包含您的 jquery 插件。

成功了！我可以点击透明元素下面的元素。我用的是 IE10。我希望这也可以工作在 IE9及以下。

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

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:' ';
}

这样你的点击落在了父元素上。如果父元素是可点击的，那么不好，但是在其他方面可以很好的工作。

小开

使用 OnClientClick = "return false;"

小开

最佳解决方案:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

在所有浏览器上都能完美运行

小开

你也可以只是“不”添加一个网址内的 <a>标签，我这样做的菜单是 <a>标签驱动下拉列表以及。如果没有下拉，然后我添加网址，但如果有下拉与 <ul> <li>列表我只是删除它。

小开

我面临着类似的问题:

  1. 我在一个指令中遇到了这个问题，我修正了它添加一个作为它的父元素，并使指针事件: 没有

  2. 上面的修复不工作的选择标签，然后我添加了 光标: 文本(这是我想要的) ，它为我工作

如果需要普通光标，可以添加 游标: 默认值


提交答案