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行代码很容易实现：
- 捕获顶部元素（要closures指针事件的元素）的“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在样式中不需要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;}
在所有浏览器上运行完美
