$ (e.target) entspricht einem Link, selbst wenn auf Element innerhalb klicken?

Ich fühle, dass ich erfahrener sein sollte als dies, aber ich kann einfach nicht zu lösen scheinen. Nach dem Klicken auf den Link oder irgendetwas darin, möchte ich das $(e.target) sein, um das Elternteil oder whatnot zu nennen.

Eine Aufschlüsselung meines Skripts sieht wie folgt aus;

$(document).on('mousedown', function(e) { 
    if ($(e.target).is('ul.SiteNav>li>a')) { 
    alert('Hello World!') 
    } 
});

Natürlich dieses nur ein Ausschnitt ist aber trotzdem, ich bin neu zu $(e.target) eine trotz meiner Suche verwendet wird, kann ich lösen nicht wie, warum Sie die <i></i> im <a></a> nicht klicken können, weil Sie immer noch einen Klick auf die Verbindung, nicht wahr/...

Hier ist ein JSFiddle Beispiel für mein Problem

Quelle

2016-05-29 Anonymous

Sie können es, und klicken Sie tatsächlich die Veranstaltung. Nur e.target ist das Element, auf das Sie geklickt haben. Und es macht Sinn. Die Handler sind auf dem Dokument, das Element ist das 'i'. Warum würde der Link den Klick bekommen? – GolezTrol

@GolezTrol gibt es einen Vorteil mit 'event.target' anstelle von' ul.SiteNav> li> a' zum Beispiel?] \ –

Wenn Sie wissen wollen, welches Element geklickt wurde. Hängt vom Anwendungsfall ab. – GolezTrol

target wird, was tiefsten Ebene Element, das Sie mit tatsächlich interagieren, aber was Sie wahrscheinlich verwirrend ist, dass Ereignisse sprudeln die Dom Baum, wenn ein Ereignis han dler wurde <a> Klick hören, auf ein Kind klicken, wird nach wie vor Blase an den Eltern und lösen die Event-Handler

Verwenden closest() zu tun, was Sie

if ($(e.target).closest('.SiteNav a').length){ 
    // code if <a> expected 
}else{ 
    // do something else when not <a> 
}

closest() umfassen auch das eigentliche Ziel wollen und arbeiten es ist Weg von diesem Startpunkt.

Quelle

2016-05-29 21:01:48 charlietfl

Mein [JSFiddle] aktualisiert (https://jsfiddle.net/sLyky1s0/1/) - Ihr Vorschlag scheint nicht zu funktionieren, aber danke. [GolezTrol Antwort] (http://stackoverflow.com/a/37514968/2199267) funktioniert perfekt finden, scheint wie du fast da warst! –

funktioniert gut, wenn Sie fehlende '{' Syntaxfehler beheben https://jsfiddle.net/sLyky1s0/2/ Suchen Sie in Ihrer Version in der Konsole nach Fehler – charlietfl

_Facepalm! _ Sollte dies entdeckt haben ... –

Sie können darauf klicken, und Sie erhalten tatsächlich das Ereignis. Nur e.target ist das Element, auf das Sie geklickt haben. Und es macht Sinn. Die Handler ist auf Dokument, das Element ist die i .. warum würde der Link den Klick bekommen?

Sie können versuchen, es in der Elternkette mit closest() zu finden. Es gibt ein Ergebnis, wenn das Element selbst oder eines seiner Eltern mit dem angegebenen Selektor übereinstimmt.

$(document).on('mousedown', function(e) { 
 
    if ($(e.target).closest('ul.SiteNav>li>a').length > 0) { 
 
    alert('Hello World!') 
 
    } 
 
});

.SiteNav { 
 
    List-style:none; 
 
} 
 
a { 
 
\t float:left; 
 
\t height:42px; 
 
\t line-height:42px; 
 
\t padding:0 10px; 
 
\t color: #f7dd71; 
 
\t text-decoration: none; 
 
\t font-size: 14px; 
 
\t font-family: "Comic Sans MS", cursive, sans-serif; 
 
\t font-weight: bold; 
 
} 
 
a:nth-of-type(1) { padding-right:2px; } 
 
a:nth-of-type(2) { padding:0 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="SiteNav"> 
 
    <li><a href="javascript:;" data-link="Reply">Reply</a></li> 
 
    <li><a href="javascript:;" data-link="Reply"><i class="fa fa-angle-down"></i></a></li> 
 
</ul>

Quelle

2016-05-29 21:03:03 GolezTrol

Brilliant, funktioniert perfekt, Danke! –

$ (e.target) entspricht einem Link, selbst wenn auf Element innerhalb klicken?

Antwort

Verwandte Themen