Pomoc pri programovaní, odpovede na otázky / jQuery / Pridať poslucháč na kliknutie na dokument po kliknutí na tlačidlo pomocou jQuery - jquery

Po kliknutí na tlačidlo pomocou nástroja jQuery - jquery pridajte poslucháča kliknutí na dokument

Snažím sa pridať poslucháč jQuery po Aklikne na určité tlačidlo na stránke. Po kliknutí na tlačidlo kliknete kamkoľvek na stránku a skript sa spustí. Problém je, že obsluha sa spustí hneď po kliknutí na tlačidlo a nečaká na kliknutie na „telo“. Tu je kód:

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>

<body>
<button data-stat="off" onclick="handler(this);">Click here</button>

</body>
<script>
function handler(btn){
if ($(btn).attr("data-stat")=="on"){
$(btn).attr("data-stat", "off");
console.log("A");
}
else {
$(btn).attr("data-stat", "on");
$(document).on("click", function (event) {
console.log("body clicked!");
$(this).unbind();
});
}
}
</script>
</html>

odpovede:

1 pre odpoveď č. 1

Myslím, že by ste mali pridať časový limit na pripojenie poslucháča po aktuálnom cykle udalostí:

function handler(btn){
if ($(btn).attr("data-stat")=="on"){
$(btn).attr("data-stat", "off");
console.log("A");
}
else {
$(btn).attr("data-stat", "on");

// add after 1 ms
setTimeout(function() {
$(document).on("click", function (event) {
console.log("body clicked!");
$(this).unbind();
});
}, 1);
}
}

1 pre odpoveď č. 2

Udalosť prebubláva DOM, takže keď k rodičovskému prvku pripojíte nový obslužný program udalosti, okamžite to zavolá. Existuje metóda nazývaná stopPropagation() čo zastaví prebublávanie udalosti. Stačí ho pridať do svojho handler() metóda.

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>

<body>
<button data-stat="off" onclick="handler(this, event);">Click here</button>

</body>
<script>
function handler(btn, ev){
ev.stopPropagation();

if ($(btn).attr("data-stat")=="on"){
$(btn).attr("data-stat", "off");
console.log("A");
}
else {
$(btn).attr("data-stat", "on");
$(document).on("click", function (event) {
console.log("body clicked!");
$(this).unbind();
});
}
}
</script>
</html>