Firefox 3.6+,Safari 4,Google Chrome support Pointer-events
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>CSS pointer events</title>
<style>
.container {
position: relative;
width: 370px;
font: 15px Verdana, sans-serif;
margin: 10px auto;
}
.overlay {
position: absolute;
right: 0px;
top: 0;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
.pointer-events-none {
pointer-events: none;
}
</style>
<script>
window.onload = function () {
document.getElementById(“enable-disable-pointer-events”).onclick = function () {
document.getElementById(“overlay”).className = “overlay “ + ((this.checked)? “pointer-events-none” : “”);
};
};
</script>
</head>
<body>
<div>
<a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>, <a href=”http://twitter.com">Twitter</a>,
<div id=”overlay”></div>
<p>
<input id=”enable-disable-pointer-events” type=”checkbox”>
<label for=”enable-disable-pointer-events”>Disable pointer events for grey box</label>
</p>
</div>
</body>
</html>