Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Поверх элемента лежит прозрачный div нужно что бы события прокидывались через него (https://javascript.ru/forum/events/11638-poverkh-ehlementa-lezhit-prozrachnyjj-div-nuzhno-chto-sobytiya-prokidyvalis-cherez-nego.html)

avchizh 04.09.2010 21:13

Поверх элемента лежит прозрачный div нужно что бы события прокидывались через него
 
<body>
		<div style="position:absolute; left:100px; top:100px; width:50px; height:50px; background:red;" onclick='alert(1)'></div>
		<div style="position:absolute; width:500px; height:500px;"></div>
    </body>


естественно пример синтетический,но такая потребность действительно существует.

z-Index менять нельзя :)

subzey 04.09.2010 21:26

Можно поверху положить еще один полностью прозрачный див?

monolithed 04.09.2010 21:54

<style type="text/css">
#div1, #div2 {
	border: 1px solid #DDDDDD;
	margin: 50px auto;
}

#div1 {
	width: 200px;
	height: 100px;
}

#div2 {
	background: #FFFFFF;
	width: 100px;
	height: 50px;
}
</style>
	
<script type="text/javascript">
window.onload = function(){
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");
	div2.onclick = function(){
		div1.style.background = (div1.style.background == '#000000') ? '' : '#000000';
	};
};
</script>

<div id="div1">
	<div id="div2"></div>
</div>

avchizh 04.09.2010 22:05

subzey: можно попробовать :) как это может помочь? в ручную считать клики? :)

monolithed: извини не понял идею, у меня 2 дива лежат в одном паренте а у тебя один в другом это серьезная разница.

monolithed 04.09.2010 22:22

avchizh

Какая разница как они лежат? Вызывай событие использую самый верхний элемент, для этого либо если есть необходимость, то положи еще один полностью прозрачный див как сказал subzey

avchizh 04.09.2010 22:26

Твой вариант не подходит т.к. не обязательно клик пришел на ниже лижайщий элемент, нужно вычислять координаты клика и если они в приделах нижнего объекта то прокидывать событие, но это же гемор и не красиво так?

monolithed 05.09.2010 00:49

Можно сделать подобную проверку:
element.onclick = function(event){
	var event = event || window.event;
	var target = event.target || event.srcElement;
	if(target.tagName == 'DIV' && target.className = 'someclass'){
		this.style.background = '#000000';
	}
};


Также если нужно то еще и проверять с какого и на какой элемент ушел курсор event.relatedTarget || event.fromElement / event.toElement; и тд..

B@rmaley.e><e 05.09.2010 10:21

Цитата:

Сообщение от monolithed
var target = event.target || event.srcElement;

Эм, так клик как раз придет на див-заглушку.

Kolyaj 05.09.2010 10:27

Просто интересно: откуда взялся такой странный кейс?

monolithed 05.09.2010 10:59

Предпологаю еще, если известны окружащие элементы то можно использовать: nextSubling / previousSubling


Часовой пояс GMT +3, время: 14:54.