Code in EventListener wird nicht sofort aufgerufen?

Question

Ich versuche diesen Code zu verstehen, aber es ergibt keinen Sinn. Wenn die Schaltfläche #open_help angeklickt wird, ruft er die handleOpen() an, die showHelp() aufruft, die die jQuery-Funktion aufruft, um das Hilfe-div anzuzeigen, aber wenn Sie unten sehen, dass er einen Ereignis-Listener hinzufügt und löscht, ruft er auch hideHelp(). Warum macht er das?

Macht er das nur, um hideHelp einzukapseln, damit es auf den Klick auf die Schaltfläche warten würde?

// listen to "help" button 
$('#open_help').bind("click",handleOpenHelp); 

function handleOpenHelp(evt) { 
    if (!$("#help").is(":visible")) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 

     showHelp(); 
    } 
} 



function showHelp() { 
    $("#help").show(); 

    document.addEventListener("click",function __handler__(evt){ 
     evt.preventDefault(); 
     evt.stopPropagation(); 
     evt.stopImmediatePropagation(); 

     document.removeEventListener("click",__handler__,true); 
     hideHelp(); 
    },true); 
} 



function hideHelp() { 
    $("#help").hide(); 
} 

Answer 1

Lassen Sie sich den Code auf das absolute Minimum vereinfachen und neu ordnen es ein wenig, um zu sehen, was los ist:

$("#help").show(); // Show the help dialog 

// If user clicks ANYWHERE (the whole document) 
document.addEventListener("click",function __handler__(evt){ 
    hideHelp(); // Hide the help dialog 

    // Remove myself from the event listener so that this function 
    // will not be called again when user clicks anywhere: 
    document.removeEventListener("click",__handler__,true); 
},true); 

Also im Grunde ist es alle Klick-Ereignisse überall auf etwas Grabbing (Button, Text, Link, blank space .. wörtlich überall) und führen Sie eine Funktion aus, um den Hilfe-Dialog auszublenden. Nachdem dies erledigt wurde (zuvor im ursprünglichen Code), entfernt es sich selbst aus dem Click-Ereignishandler, sodass andere Dinge auf der Seite wieder Klicks erhalten können.

Answer 2

Wenn Sie Verbergen der Hilfe auffallen wird, ist im Grunde ein Teil von „Click“ Ereignis-Listener, die auf das Dokumentelement angehängt wird, nachdem eine Person Hilfe klickt. Das bedeutet, sobald die Hilfe-Info angezeigt wird, müssen Sie nur noch irgendwo auf die Seite klicken und was angezeigt wurde, wird wieder ausgeblendet.

stoppropigation und stopimmediatepropogation sind nur Versicherung, dass nichts anderes geschehen wird, was er will. Es stoppt alle Eventhandler und Eltern-Eventhandler in ihren Spuren.

Er entfernt dann den Ereignis-Listener "Click", der hinzugefügt wurde, als das Show-Ereignis ausgelöst wurde. Es wird wieder hinzugefügt, sobald auf Hilfe geklickt wird.

dann verbirgt er schließlich das Hilfselement und wartet auf Hilfe, um erneut angeklickt zu werden.

Hoffe das beantwortet Ihre Frage.