仅在 IE9 中无法点击锚标记答案

【问题标题】：Anchor tag not clickable only in IE9仅在 IE9 中无法点击锚标记
【发布时间】：2014-10-04 01:27:04
【问题描述】：

下面是一个简单的 html 文件，包含一个锚点，由具有特定样式的块元素覆盖。应用样式后，该链接仅在 IE9 中不可点击。应用的样式是使锚点静音但允许用户在需要时单击。使用 Jquery 尝试了不同的选项，但没有成功。在 html/css 中对此有何 hack？

<!DOCTYPE html>
<html>
<head>
    <title>Trial</title>
    <style>
    .overlay {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,.4);
        pointer-events: none;
    }       
    </style>
</head>
<body>
    <div class="overlay"></div>
    <a href="http://www.google.com" target="_blank">ClickMe</a>
</body>
</html>

【问题讨论】：

在 IE9 中使用 pointer-events: none; 会取消点击（指针）事件
删除pointer-events属性后是否有效？
@EricHolmes 错了。 pointer-events:none"instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead."

标签： html css internet-explorer internet-explorer-9

【解决方案1】：

pointer-events（参见：http://caniuse.com/#feat=pointer-events）

作为一种变通方法，您可以使用 JavaScript 来监听对覆盖层的点击，然后触发点击下方链接（如果它在您的光标下）。比如：

function simulateClick(el) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    el.dispatchEvent(evt);
};
function isOnTopOf(evt, el) {
    return evt.clientX >= el.offsetLeft && evt.clientX <= el.offsetLeft+el.offsetWidth && evt.clientY >= el.offsetTop && evt.clientY <= el.offsetTop+el.offsetHeight;
};          

var overlay = document.getElementById("overlay");
var clicker = document.getElementById("clicker");

overlay.addEventListener('click', function(evt) {
    if(isOnTopOf(evt, clicker)){
        simulateClick(clicker);
    }
}, false);

http://jsfiddle.net/nxdm5x3u/

但是如果您这样做的全部原因是为了让链接看起来“静音”，您可以使用 CSS 使其半透明，而不用担心覆盖：

a.muted {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

【讨论】：

对否决票有任何反馈吗？这不是很好吗？无效吗？它不符合OP的要求吗？有什么可以帮助我改进答案的吗？谢谢。
@Teemu。你好。那是什么CSS技巧？我根本没有设置背景。我不知道 IE 这样做了。您是否建议为叠加层赋予背景：透明并通过其他方式使其半透明？如果是这样，也许您应该将其发布为答案。
看起来我已经混合了代码，删除了评论。