Inte släcka div1 genom att klicka på div2 som ligger ovanför div1

7 svar · 663 visningar · startad av prplxr 20 nov. 2012

prplxrMedlem sedan juni 2012581 inlägg

Frågan20 nov. 2012 09:43#1

Hej, hallå igen!

Har stött på patrull nu. Har en div med en div i. Den första diven är lika stor som skärmen och den andra diven ligger centrerad ovanför den första.

När man klickar utanför div#2 skall div#1 (och således också div#2) försvinna, display: none;.

Det fungerar utmärkt, så när som på att om man klickar i div#2 släcks de också, något jag verkligen inte vill. Kan man lösa detta på något bra sätt? Div#2 har högre z-index än div #1


+---------------------------------------+
|                    Div#1              |
|    +-----------------------------+    |
|    |               Div#2         |    |
|    +-----------------------------+    |
|                                       |
+---------------------------------------+

voigtann1Medlem sedan juni 20019 519 inlägg

20 nov. 2012 09:55#2

det är för att event triggas neråt, du få se tilll att om div#2 clickas så skall den inte gå längre ner med click eventet, eller så ser du om click eventets current.target inte är #1 om det är det så kör inte din animering. Är rätt enkelt med jQuery.

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 nov. 2012 10:08#3

http://api.jquery.com/event.stopPropagation/

prplxrMedlem sedan juni 2012581 inlägg

20 nov. 2012 10:14#4

nitro2k01 skrev:

http://api.jquery.com/event.stopPropagation/

Det där lät ju jättesmidigt, men jag kanske är sävlig som inte begriper varför

$("#sharer").click(function(event){
    event.stopPropagation();
});

inte fungerar. Är det här rätt approach?

voigtann1Medlem sedan juni 20019 519 inlägg

20 nov. 2012 10:22#5

Du få göra det på din kod som binder click eventet, nu verkar det som du binder två events på #sharer men det är bara en som kommer stoppa Propagation

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 nov. 2012 10:29#6

Ja precis, förutsatt att #sharer är div 2. Sen gäller det förstås att div 2 faktiskt ligger inuti div 1, och inte bara är ett absolut positionerat element som råkar liggar över div1. Events går neråt baserat på DOM-trädet (dvs HTML-strukturen) inte grafisk position.

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 nov. 2012 10:31#7

Jag gjorde en snabbt testsida för att kolla att allt funkar som tänkt, och det gör det i detta exempel.

<html>
<head>

<script src="jquery-1.8.3.js"></script>
<script>
$(window).load(function(){
	$("#div1").click(function(event){
		alert("div 1");
	});

	$("#div2").click(function(){
		event.stopPropagation();
		alert("div 2");
	});

});
</script>

</head>
<body>
<div id="div1">
div 1
	<div id="div2">
	div 2
	</div>
</div>
</body>
</html>

prplxrMedlem sedan juni 2012581 inlägg

20 nov. 2012 11:02#8

nitro2k01 skrev:

Jag gjorde en snabbt testsida för att kolla att allt funkar som tänkt, och det gör det i detta exempel.

<html>
<head>

<script src="jquery-1.8.3.js"></script>
<script>
$(window).load(function(){
	$("#div1").click(function(event){
		alert("div 1");
	});

	$("#div2").click(function(){
		event.stopPropagation();
		alert("div 2");
	});

});
</script>

</head>
<body>
<div id="div1">
div 1
	<div id="div2">
	div 2
	</div>
</div>
</body>
</html>

Jahaaaaaaaaaaaa! Nu greppar jag hur det där fungerar! Tusen tack!