binding event on click

Question

Ich habe eine Kontextmenütaste und ein Kontextmenü, das geöffnet wird, wenn auf die Kontextmenüschaltfläche geklickt wird. Auf diesem Klick möchte ich auch ein Ereignis auf dem Dokument binden, so dass das Kontextmenü kollabiert, wenn der nächste Klick außerhalb der Grenzen des Kontextmenüs ist, jedoch wird mit meinem Code die zweite Ereignislogik bereits beim Öffnen des Kontextmenüs ausgeführt .

$('.btn-user-context-menu').on('click tap', function(){ 

    //open the menu 
    $('.context-menu[data-context="user"]').toggleClass('open'); 

    //bind event so that menu collapses if next click is outside of it 
    $(document).on('click tap', function(e){ 
     console.log('x'); 
    }) 
}) 

Vielen Dank für Ihre Hilfe, und ich würde eine Erklärung auch wirklich zu schätzen :)

Answer 1

ein Click-Ereignis auf den Dokumentkörper anbringen, die das Fenster schließt. Hängen Sie ein separates Klickereignis an das Fenster an, das die Weitergabe an den Dokumententext unter stoppt.

$(window).click(function() { 
//Hide the menu if visible 
}); 

$('.btn-user-context-menu').click(function(event){ 
    event.stopPropagation(); 
}); 

Quelle: answer

(ich habe genug rep nicht einen Kommentar hinterlassen)

UPDATE

Ich habe nicht ganz verstanden, was Sie brauchen, Also werde ich eine glückliche Vermutung geben, auch ich konnte keinen besseren Ansatz finden, das Fensterklick-Ereignis wird weiterhin ausgelöst, aber der Innencode wird nicht ausgeführt, wenn das Menü angezeigt wird t zu keiner. Hoffe es hilft.

$(window).click(function() { 
    //Hide the menu if visible 
    alert('trigger event but do not collapse if it\'s already collapsed'); 
    if($('.menu').css('display') !== 'none'){ 
    $('.menu').slideUp("slow", function() { 
     alert('collapse'); 
    }); 
    } 
}); 

$('.btn-user-context-menu').click(function(event){ 
     $('.menu').slideDown("slow", function() { 
     //do something if you want 
     alert('expand'); 
    }); 
    event.stopPropagation(); 
}); 

jsfiddle

Answer 2

$(document).click(function(e) { 
 

 
    // check that your clicked 
 
    // element has no id=info 
 
    // and is not child of info 
 
    if (e.target.id != 'info' && e.target.id != 'mb' && !$('#info').find(e.target).length) { 
 
     $("#info").hide(); 
 
    } 
 
}); 
 

 
$('#mb').on('click', function(){ 
 
    $('#info').show(); 
 
});

#info{ 
 
    background: #ccc; 
 
    padding: 10px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button id="mb"> 
 
Menu 
 
</button> 
 
<div id="info"> 
 
    <h1>Header</h1> 
 
    Menu item 1<br> 
 
    Menu item 2 
 
</div>