Все обработчики будут вызываться для нужного элемента, а не для того, который сверху.
Для примера
Что ниже
<style>
div {
position: absolute;
left: 0px;
top: 0px;
height: 100px;
}
</style>
<div style="width: 100px; background: green; z-index: 98">div</div>
<div style="width: 50px; background: blue; z-index: 100">div1</div>
<div style="width: 50px; left: 50px; background: red; z-index: 100">div2</div>
<script>
window.onload = function () {
var divs = document.getElementsByTagName('div');
var div = divs[0];
var div1 = divs[1];
var div2 = divs[2];
div1.onclick = function () {
alert(this.innerHTML);
}
div2.onclick = function () {
alert(this.innerHTML);
}
div.onclick = function (e) {
e = e || event;
this.style.zIndex = 99;
var elem = document.elementFromPoint(e.clientX, e.clientY);
this.style.zIndex = 101;
elem.click();
}
}
</script>
Как работает
<style>
div {
position: absolute;
left: 0px;
top: 0px;
height: 100px;
}
</style>
<div style="width: 100px; background: green; z-index: 101">div</div>
<div style="width: 50px; background: blue; z-index: 100">div1</div>
<div style="width: 50px; left: 50px; background: red; z-index: 100">div2</div>
<script>
window.onload = function () {
var divs = document.getElementsByTagName('div');
var div = divs[0];
var div1 = divs[1];
var div2 = divs[2];
div1.onclick = function () {
alert(this.innerHTML);
}
div2.onclick = function () {
alert(this.innerHTML);
}
div.onclick = function (e) {
e = e || event;
this.style.zIndex = 99;
var elem = document.elementFromPoint(e.clientX, e.clientY);
this.style.zIndex = 101;
elem.click();
}
}
</script>