---
title: "Inte släcka div1 genom att klicka på div2 som ligger ovanför div1"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/190664-inte-släcka-div1-genom-att-klicka-på-div2-som-ligger-ovanför-div1"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "prplxr"
published: "2012-11-20T09:43:48.000Z"
updated: "2012-11-20T11:02:06.000Z"
replies: 7
views: 677
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/190664-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

## #1 — prplxr, 2012-11-20T09:43Z

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

Permalänk: https://www.webforum.nu/p/190664

## #2 — voigtann1, 2012-11-20T09:55Z

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.

Permalänk: https://www.webforum.nu/p/2306205

## #3 — nitro2k01, 2012-11-20T10:08Z

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

Permalänk: https://www.webforum.nu/p/2306206

## #4 — prplxr, 2012-11-20T10:14Z

> **[nitro2k01 skrev:](https://www.webforum.nu/p/1556615)**
>
> <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?

Permalänk: https://www.webforum.nu/p/2306207

## #5 — voigtann1, 2012-11-20T10:22Z

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

Permalänk: https://www.webforum.nu/p/2306208

## #6 — nitro2k01, 2012-11-20T10:29Z

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.

Permalänk: https://www.webforum.nu/p/2306210

## #7 — nitro2k01, 2012-11-20T10:31Z

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

Permalänk: https://www.webforum.nu/p/2306211

## #8 — prplxr, 2012-11-20T11:02Z

> **[nitro2k01 skrev:](https://www.webforum.nu/p/1556620)**
>
> 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!

Permalänk: https://www.webforum.nu/p/2306212

---

Tråden på webben: https://www.webforum.nu/amne/javascript/190664-inte-släcka-div1-genom-att-klicka-på-div2-som-ligger-ovanför-div1
