Html IE 的 css 'pointer-events' 属性替代
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5855135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css 'pointer-events' property alternative for IE
提问by anupam
I have a drop down navigation menu in which some of the title should not navigate to other page when clicked(these title open a drop down menu when clicked on) while others should navigate (these dont have dropdown and navigate directly).However, both types have hrefdefined to them
我有一个下拉导航菜单，其中一些标题在点击时不应导航到其他页面（这些标题在点击时打开一个下拉菜单），而其他标题应该导航（这些没有下拉菜单并直接导航）。但是，两者类型已经href定义给他们
To solve this i added the following css for the former type of titles
为了解决这个问题，我为前一种类型的标题添加了以下 css
pointer-events: none;
and it is working fine.But since this property is not supported by IE, i am looking for some work-around. The annoying thing is that i don't have access and privilege to change the HTML and JavaScript codecompletely.
它工作正常。但由于 IE 不支持此属性，因此我正在寻找一些解决方法。令人讨厌的是，我没有完全更改 HTML 和 JavaScript 代码的访问权限和特权。
Any ideas?
有任何想法吗？
采纳答案by Kyle
Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.
Pointer-events 是 Mozilla 的一个黑客，它已经在 Webkit 浏览器中实现，你不能指望再过一百万年在 IE 浏览器中看到它。
There is however a solution I found:
然而，我找到了一个解决方案：
Forwarding Mouse Events Through Layers
This uses a plugin that uses some not well known/understood properties of Javascript to take the mouse event and send it to another element.
这使用了一个插件，该插件使用一些不太为人所知/理解的 Javascript 属性来获取鼠标事件并将其发送到另一个元素。
There is also another Javascript solution here.
也有另一种JavaScript解决方案在这里。
Update for October 2013: apparently it's coming to IE in v11. Source. Thanks Tim.
2013 年 10 月更新：显然它即将在 v11 中加入 IE。来源。谢谢蒂姆。
回答by MarzSocks
Here is another solution that is very easy to implement with 5 lines of code:
这是另一个很容易用 5 行代码实现的解决方案：
- Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
- In the 'mousedown' hide the top element.
- Use 'document.elementFromPoint()' to get the underlying element.
- Unhide the top element.
- Execute the desired event for the underlying element.
- 捕获顶部元素（要关闭指针事件的元素）的 'mousedown' 事件。
- 在 'mousedown' 中隐藏顶部元素。
- 使用 'document.elementFromPoint()' 获取底层元素。
- 取消隐藏顶部元素。
- 为底层元素执行所需的事件。
Example:
例子：
//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;
});
回答by obiuquido144
There's a workaround for IE - use inline SVG and set pointer-events="none" in SVG. See my answer in How to make Internet Explorer emulate pointer-events:none?
IE 有一个解决方法 - 使用内联 SVG 并在 SVG 中设置 pointer-events="none"。请参阅如何使 Internet Explorer 模拟指针事件：无？
回答by Niks
It's worth mentioning that specifically for IE, disabled=disabledworks for anchor tags:
值得一提的是，专门针对 IE，disabled=disabled适用于锚标签：
<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>
IE treats this as an disabledelement and does not trigger click event. However, disabledis not a valid attribute on an anchor tag. Hence this won't work in other browsers. For them pointer-events:noneis required in the styling.
IE 将其视为一个disabled元素，不会触发点击事件。但是，disabled不是锚标记上的有效属性。因此这不适用于其他浏览器。因为他们pointer-events:none在造型中是必需的。
UPDATE 1: So adding following rule feels like a cross-browser solution to me
UPDATE 2: For further compatibility, because IE will not form styles for anchor tags with disabled='disabled', so they will still lookactive. Thus, a:hover{}rule and styling is a good idea:
更新 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;
}
Working on Chrome, IE11, and IE8.
Of course, above CSS assumes anchor tags are rendered with disabled="disabled"
在 Chrome、IE11 和 IE8 上工作。
当然，上面的 CSS 假设锚标签是用disabled="disabled"
回答by Kent Mewhort
Here's a small script implementing this feature (inspired by the Shea Frederick blog articlethat Kyle mentions):
这是一个实现此功能的小脚本（受Kyle 提到的Shea Frederick 博客文章的启发）：
回答by Mai
I spent almost two days on finding the solution for this problem and I found this at last.
我花了将近两天的时间来寻找这个问题的解决方案，我终于找到了。
This uses javascript and jquery.
这使用 javascript 和 jquery。
(GitHub) pointer_events_polyfill
（GitHub）pointer_events_polyfill
This could use a javascript plug-in to be downloaded/copied.
Just copy/download the codes from that site and save it as pointer_events_polyfill.js. Include that javascript to your site.
这可以使用 javascript 插件来下载/复制。只需从该站点复制/下载代码并将其另存为pointer_events_polyfill.js. 将该 javascript 包含到您的网站中。
<script src="JS/pointer_events_polyfill.js></script>
<script src="JS/pointer_events_polyfill.js></script>
Add this jquery scripts to your site
将此 jquery 脚本添加到您的站点
$(document).ready(function(){
PointerEventsPolyfill.initialize({});
});
And don't forget to include your jquery plug-in.
并且不要忘记包含您的 jquery 插件。
It works! I can click elements under the transparent element. I'm using IE 10. I hope this can also work in IE 9 and below.
有用！我可以点击透明元素下的元素。我正在使用 IE 10。我希望这也可以在 IE 9 及以下版本中工作。
EDIT:Using this solution does not work when you click the textboxes below the transparent element. To solve this problem, I use focus when the user clicks on the textbox.
编辑：当您单击透明元素下方的文本框时，使用此解决方案不起作用。为了解决这个问题，我在用户点击文本框时使用焦点。
Javascript:
Javascript：
document.getElementById("theTextbox").focus();
JQuery:
查询：
$("#theTextbox").focus();
This lets you type the text into the textbox.
这使您可以在文本框中键入文本。
回答by Graham P Heath
Cover the offending elements with an invisible block, using a pseudo element: :beforeor :after
用一个不可见的块覆盖有问题的元素，使用伪元素：:before或:after
a:before {
//IE No click hack by covering the element.
display:block;
position:absolute;
height:100%;
width:100%;
content:' ';
}
Thus you're click lands on the parent element. No good, if the parent is clickable, but works well otherwise.
因此，您点击了父元素。不好，如果父级是可点击的，但否则效果很好。
回答by yves.beutler
I've found another solution to solve this problem. I use jQuery to set the href-attribute to javascript:;(not ' ', or the browser will reload the page) if the browser window width is greater than 1'000px. You need to add an ID to your link. Here's what I'm doing:
我找到了另一个解决方案来解决这个问题。如果浏览器窗口宽度大于 1'000px，我使用 jQuery 将href-attribute设置为javascript:;（不是 ' '，否则浏览器将重新加载页面）。您需要在链接中添加一个 ID。这是我在做什么：
// get current browser width
var width = $(window).width();
if (width >= 1001) {
// refer link to nothing
$("a#linkID").attr('href', 'javascript:;');
}
Maybe it's useful for you.
也许它对你有用。
回答by user3657756
You can also just "not" add a url inside the <a>tag, i do this for menus that are <a>tag driven with drop downs as well. If there is not drop down then i add the url but if there are drop downs with a <ul> <li>list i just remove it.
您也可以“不”在<a>标签内添加一个 url ，我也为<a>标签驱动的菜单执行此操作。如果没有下拉，那么我添加网址，但如果有下拉<ul> <li>列表，我只需将其删除。
回答by Z.T
I faced similar issues:
我遇到过类似的问题：
I faced this issue in a directive, i fixed it adding a as its parent element and making pointer-events:none for that
The above fix did not work for select tag, then i added cursor:text(which was what i wanted) and it worked for me
我在指令中遇到了这个问题，我修复了它添加 a 作为其父元素并为此创建指针事件：无
上面的修复对 select 标签不起作用，然后我添加了cursor:text（这是我想要的），它对我有用
If a normal cursor is needed you could add cursor:default
如果需要普通光标，您可以添加cursor:default
