Ein Klick-Ereignis funktioniert nicht, wenn es untergeordnete Elemente hat

Question

Sorry, wenn der Titel irgendwie verwirrend ist, werde ich einfach versuchen, es durch Code zu erklären. Im Grunde habe ich eine Schaltfläche erstellt, die den Einkaufswagen einer E-Commerce-Website anzeigt oder versteckt (ich verwende woocommerce). Hier ist ein Beispiel für den Code, den ich arbeite.

HTML Markup

<div class="crate-status toggle-cart"> 
    <img src="http://localhost/crate/wp-content/uploads/2016/05/mini-cart-icon.png" /><span class="crate-name">Crate:</span> 
    <span class="cart-contents"><?php echo sprintf (_n('%d', '%d', WC()->cart->get_cart_contents_count()), WC()->cart->get_cart_contents_count()); ?></span> 

    <?php woocommerce_header_add_to_cart_fragment($fragments) ?> 
</div> 

Javascript

$(document).ready(function() { 
    $('.toggle-cart').on('click', function(event) { 
     $('.crate-box').toggleClass('toggle'); 
     $('.overlay-site').toggleClass('show-overlay'); 
    }) 

    $('body').on('click', function(event) { 
     if (!$(event.target).is('.toggle-cart')) { 
     $('.crate-box').removeClass('toggle'); 
     $('.overlay-site').removeClass('show-overlay'); 
     } 
    }) 

}) 

Die Taste funktioniert gut, aber wenn ich auf die untergeordneten Elemente wie img klicken oder umspannen es nicht scheinen die Onclick-Funktion auszulösen, obwohl sie sich in einem Elternelement befindet ent (.toggle-Warenkorb)

Hier ist der Link zur Website http://crate.ph/home/

Answer 1

Ihre beiden Event-Handler aus einem einzigen Klick feuern, so dass Sie es zweimal sind Makeln. Sie können das Problem sehen, wenn Sie in jedem Handler einen Haltepunkt setzen.

Versuchen Sie, den toggle-cart-Handler event.stopPropagation() anstelle der if-Anweisung im anderen Handler hinzuzufügen. So ähnlich:

$(document).ready(function() { 
    $('.toggle-cart').on('click', function(event) { 
     event.stopPropagation(); 
     $('.crate-box').toggleClass('toggle'); 
     $('.overlay-site').toggleClass('show-overlay'); 
    }) 

    $('body').on('click', function(event) { 
     $('.crate-box').removeClass('toggle'); 
     $('.overlay-site').removeClass('show-overlay'); 
    }) 
}) 

Answer 2

Das ist einfach. Es funktioniert tatsächlich. Wenn Sie in Ihrem

$ einen Haltepunkt setzen (‚schalten Karren‘) .auf (‚Klick‘, Funktion (event) {...}

Sie werden sehen, es ist eigentlich dort auslöst. aber auch dieses Ding ausgelöst wird:

$('body').on('click', function(event) { 
    if (!$(event.target).is('.toggle-cart')) { 
    $('.crate-box').removeClass('toggle'); 
    $('.overlay-site').removeClass('show-overlay'); 
    } 
}) 

So in Zustand, wenn Sie nicht darauf klicken Warenkorb .toggle--> Ihr eventlistener auf Körper versteckt Ihre Form

Ein besserer Ansatz wäre nicht hinzuzufügen und Eventlistener auf ganzen Körper, aber um es auf Overlay hinzuzufügen, haben Sie dort Hörer auf Körper ist nicht eine große Sache für viele Fälle

Answer 3

Dies ist nicht Java Script Problem. Das ist CSS-Problem. Sie müssen class = "Kistenname" float links.