Question

下面是简单的html文件，包含一个锚点，按块元素叠加一定的样式。应用样式后，链接将仅在IE9中变为不可点击。应用的样式是使锚点静音但允许用户在需要时单击。通过使用Jquery尝试了不同的选项，没有成功。在html / css中有什么黑客攻击吗？

<!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>

Answer 1

＆lt;不支持CSS属性pointer-events IE11（见：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);
}

Anchor标签只能在IE9中点击

1 个答案: