I'm learning JQuery through w3school. And I came across this example.
From my understanding, $("*").dblclick() bind the double click event to each element in the document (each element has its own event and they are seperated).
And, I expect that, after double clicking a <p> element, only the one clicked will disappear. However, when I click a <p> element, every <p> element disappears. May I know how is my understanding wrong?
"*" selects ALL elements, including <body> and <html> (https://api.jquery.com/all-selector/). So, if you double click one of your paragraphs, the event will be triggered three times, one for <p>, one for <body> and one for <html> generating this "undesired" behavior. If one of your <p> was inside, lets say, a <div>, the event would be triggered four times. One way to prevent this is to stop the event propagation.
$( function() {
$( "*" ).dblclick( function( event ){
console.log( event.target.innerHTML );
console.log( event.target.parentElement.tagName );
$(this).hide();
event.stopPropagation();
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>aaaaaa</p>
<p>bbbbbb</p>
<p>cccccc</p>
<div>
<p>dddddd</p>
</div>👋
That's because the * in $("*").dblclick() is a selector as explained in W3Schools.
To which * means "all the elements", referencing the DOM structure of HTML, <body> is also an element, and JQuery is indeed appending the event on it as well, so when you say "when I click a <p> element", what you should actually mean is _"when I click the <body> element".
That is because the <body> element is hierarchically positioned higher than the p elements, and the event is being triggered on that element because it takes precedence over the p which body contains.
So, your code is working absolutely fine. But if you wanted, for example, that "after double clicking a <p> element, only the one clicked will disappear",
maybe your code should look something like this:
$("p").dblclick()
Which means, find all p elements and bind this event and will comply with your expectations.
Hope you let me know what happened when you tried it out! Happy coding!