event.target.parentNode ... verweist auf verschiedene Eltern in Chrome und Firefox?

Question

In diesem Projekt bin ich am arbeiten Ich habe Knopf, der hat und Bild darin für Styling-Zwecke ... Ich versuche, die Funktionalität zu implementieren, so dass, wenn auf die Schaltfläche geklickt wird, ich event.target.parentNode.parentNode ... a Anzahl der Male, um ein HTML5-Datenattribut (postid) von einem der obersten Eltern divs zu bekommen, in Firefox muss ich ParentNode 4 mal anrufen und es funktioniert in Chrome es funktioniert nicht Ich muss ParentNode 5 mal aufrufen, das bedeutet die beiden Browser beziehen sich auf verschiedene Eltern. Ich habe $ (event.target) .parent(). Parent() hinzugefügt. Css ('border', '5px solid black'); um herauszufinden, welches Ziel jeder Browser in Betracht zieht. Ich fand, dass Chrome das event.target als das Bild betrachtet (was tatsächlich angeklickt wurde), aber Firefox betrachtet die Schaltfläche als event.target (wo das Ereignis tatsächlich angehängt wurde) ..... Wie kann ich das machen? Diese Schaltfläche und ihr Ereigniscode sind in beiden Browsern tragbar, ohne das Bild innerhalb des Schaltflächen-Tags zu entfernen (das hat funktioniert).

Der Code sieht aus wie

$(document).on('click', '.opinion', function(event) { 
 

 
    try { 
 
    post_id = event.target.parentNode.parentNode.parentNode.parentNode.dataset['postid']; 
 
    //$(event.target).parent().parent().css('border','5px solid black'); 
 
    url = $('#opinionUrl' + post_id).val(); 
 
    token = $('#token').val(); 
 
    } catch (e) { 
 

 
    alert(e); 
 
    } 
 
///Some more code to do stuff 
 
});

<button class="icon opinion"> 
 
    <img class="icon" src="{{URL::asset('assets/icons/haha.png')}}"> 
 
</button>

Answer 1

Warum jQuery und Kette parentNode oder .parent() verwenden?

.closest() wird die Arbeit für Sie tun https://api.jquery.com/closest/

post_id = $(this).closest("[data-postid]").data().postid;