我有一个下拉导航菜单，其中某些标题在单击时不应导航到其他页面（这些标题在单击时会打开一个下拉菜单），而其他标题应导航（这些没有下拉菜单并直接导航）。但是，这两种类型都定义了href
为了解决这个问题，我为前一种标题添加了以下 css
pointer-events: none;
它工作正常。但由于 IE 不支持此属性，我正在寻找一些解决方法。 烦人的是我没有完全更改 HTML 和 JavaScript 代码的访问权限和权限。
有什么想法吗？
【问题讨论】：
pointer-events 现在在 IE11+ 中
标签： html css internet-explorer browser cross-browser
Pointer-events 是 Mozilla hack，它已在 Webkit 浏览器中实现，您不能指望再过一百万年在 IE 浏览器中看到它。
但是我找到了一个解决方案：
Forwarding Mouse Events Through Layers
这使用了一个插件，该插件使用一些不为人知/不理解的 Javascript 属性来获取鼠标事件并将其发送到另一个元素。
还有另一个 Javascript 解决方案here。
2013 年 10 月更新：显然它会在 v11 中进入 IE。 Source。谢谢蒂姆。
【讨论】：
"you can't expect to see it in IE browsers for another million years." 只用了 3 年...
这是另一个很容易用 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 有一个解决方法 - 使用内联 SVG 并在 SVG 中设置 pointer-events="none"。 在How to make Internet Explorer emulate pointer-events:none?中查看我的回答
【讨论】：
值得一提的是，对于 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" 渲染的
【讨论】：
这是一个实现此功能的小脚本（灵感来自 Kyle 提到的 Shea Frederick blog article）：
【讨论】：
用不可见的块覆盖有问题的元素，使用伪元素：:before 或 :after
a:before {
//IE No click hack by covering the element.
display:block;
position:absolute;
height:100%;
width:100%;
content:' ';
}
因此，您点击的是父元素。不好，如果父级是可点击的，但在其他情况下效果很好。
【讨论】：
我花了将近两天的时间来寻找这个问题的解决方案，我终于找到了。
这使用 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 及以下版本中使用。
编辑：当您单击透明元素下方的文本框时，使用此解决方案不起作用。为了解决这个问题，我在用户点击文本框时使用焦点。
Javascript：
document.getElementById("theTextbox").focus();
JQuery:
$("#theTextbox").focus();
这让您可以在文本框中输入文本。
【讨论】：
我找到了另一个解决方案来解决这个问题。如果浏览器窗口宽度大于 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:;');
}
也许对你有用。
【讨论】：
使用OnClientClick = "return false;"
【讨论】：
您也可以“不”在<a> 标记内添加一个网址，我也为<a> 标记驱动的下拉菜单执行此操作。如果没有下拉列表，那么我添加 url，但如果有带有 <ul> <li> 列表的下拉列表，我只需将其删除。
【讨论】：
我也遇到过类似的问题：
我在指令中遇到了这个问题，我修复了它，添加 a 作为其父元素并为此设置了 pointer-events:none
上述修复不适用于选择标签，然后我添加了 cursor:text（这是我想要的），它对我有用
如果需要普通光标，您可以添加 cursor:default
【讨论】：
最佳解决方案：
.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}
在所有浏览器上完美运行
【讨论】：