Показать сообщение отдельно
  #8 (permalink)  
Старый 28.08.2012, 12:38
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Все обработчики будут вызываться для нужного элемента, а не для того, который сверху.
Для примера
Что ниже
<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>
Ответить с цитированием