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

**voigtann1** · 2012-11-20, 09:55

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.

**nitro2k01** · 2012-11-20, 10:08

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

**prplxr** · 2012-11-20, 10:14

Originally posted by nitro2k01

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

Code:

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

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

**voigtann1** · 2012-11-20, 10:22

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

**nitro2k01** · 2012-11-20, 10:29

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.

**nitro2k01** · 2012-11-20, 10:31

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

html:

<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>

**prplxr** · 2012-11-20, 11:02

Originally posted by nitro2k01

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

html:

<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!

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Oderland