Why do all elements disappear with "*" selector?-CodePudding

code picture

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  element, only the one clicked will disappear. However, when I click a  element, every  element disappears. May I know how is my understanding wrong?

CodePudding user response：

"*" 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 , one for <body> and one for <html> generating this "undesired" behavior. If one of your  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>

CodePudding user response：