IE浏览器的'指针事件'属性替代

我有一个下拉导航菜单,其中一些标题不应该导航到其他页面点击时(这些标题打开一个下拉菜单,当点击),而其他人应该导航(这些没有下拉,直接导航)。但是,两者types有定义给他们的href

为了解决这个问题,我添加了以下types的标题的CSS

 pointer-events: none; 

它工作正常。但由于此属性不支持IE浏览器,我正在寻找一些解决办法。 烦人的是, 我没有访问权限和完全改变HTML和JavaScript代码

有任何想法吗?

指针事件是一个Mozilla黑客攻击,并且已经在Webkit浏览器中实现,你不能期望在IE浏览器中看到它再一百万年。

然而,我find了一个解决scheme:

通过图层转发鼠标事件

这使用一个插件,使用一些不是众所周知的/理解的Javascript属性来接受鼠标事件并将其发送到另一个元素。

这里还有另一个Javascript解决scheme。

2013年10月的更新 :显然它是在IE11中。 来源 。 谢谢蒂姆。

对IE来说有一个解决方法 – 在SVG中使用内联SVG和设置pointer-events =“none”。 请参阅我的答案如何使Internet Explorer模拟指针事件:无?

这是另一个解决scheme,用5行代码很容易实现:

  1. 捕获顶部元素(要closures指针事件的元素)的“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在样式中不需要pointer-events:none

更新1 :所以添加下面的规则感觉像一个跨浏览器的解决scheme给我

更新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"

这是一个实现这个function的小脚本(由Kyle提到的Shea Frederick博客文章的启发):

  • 指针事件填充 。

用一个伪元素覆盖有问题的元素:before:after

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

因此,你是在父元素上点击土地。 如果父母是可点击的,则不行,但是否则工作得很好。

我花了差不多两天的时间find解决这个问题的方法,最后终于find了答案。

这使用JavaScript和jQuery。

(GitHub)pointer_events_polyfill

这可以使用JavaScript插件来下载/复制。 只需从该站点复制/下载代码并将其保存为pointer_events_polyfill.js 。 将该javascript包含到您的网站。

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

将这个jQuery脚本添加到您的网站

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

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

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

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

使用Javascript:

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

JQuery的:

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

这使您可以在文本框中input文本。

我发现了另一个解决scheme来解决这个问题。 我使用jQuery将href属性设置为javascript:; (不是“,或浏览器将重新加载页面),如果浏览器窗口宽度大于1'000像素。 您需要为您的链接添加一个ID。 这是我正在做的事情:

 // get current browser width var width = $(window).width(); if (width >= 1001) { // refer link to nothing $("a#linkID").attr('href', 'javascript:;'); } 

也许这对你有用。

使用OnClientClick = "return false;"

最佳解决scheme

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

在所有浏览器上运行完美