JQuery - Warum event.target funktioniert in dieser Situation nicht?

Question

nur wundernd, warum, wenn ich innerhalb des Containers die Alarm-Popups trotz der if-Anweisung klicken, damit sie beim Klicken nicht angezeigt wird.

Auch wie würde ich für die Kinder im Inneren testen?

https://jsfiddle.net/w8fd3m67/

$(window).on("click", function(event) { 
 
    var container = $("#container"); 
 
    if ((event.target) !== container) { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Prost

Answer 1

sollten Sie verwenden .is()

if($(event.target).is(container)) 

Answer 2

Verwenden .is() Funktion zur Zusammenarbeit mpare das Ereignisziel zu Ihrem JQuery-Element:

$(window).on("click", function(event) { 
 
    var container = $("#container"); 
 
    if ($(event.target).is(container)) { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Answer 3

die id vergleichen. Hier $("#container") ist ein jQuery-Objekt

$(window).on("click", function(event) { 
 
    if ((event.target.id) !== 'container') { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Answer 4

Sie ein DOM-Element zu einem jQuery-Objekt verglichen werden, die nie übereinstimmen. Erstellen Sie ein jQuery-Objekt außerhalb des Ziels und überprüfen Sie, ob es sich um einen Nachkomme von #container handelt. Dies funktioniert auch, wenn Sie unter #container untergeordnete Elemente haben.

Updated fiddle

$(window).on("click", function(event) { 
    if ($(event.target).closest('#container').length == 0){ 
    alert("clicked outside"); 
    } 
}); 

Answer 5

versuchen Sie dies:

$(window).on("click", function(event) { 
var container = $("#container"); 
if ((event.target) !== container[0]) { 
    alert("clicked outside"); 
}});