为什么使用“*”选择器的所有元素都消失了？

Question

code picture

我正在通过 w3school 学习 JQuery。我遇到了这个例子。根据我的理解，$("*").dblclick() 将双击事件绑定到文档中的每个元素（每个元素都有自己的事件并且它们是分开的）。

而且，我希望在双击  元素后，只有单击的元素会消失。但是，当我单击  元素时，每个  元素都会消失。请问我的理解哪里错了？

Answer 1

"*" 选择所有元素，包括 <body> 和 <html> (https://api.jquery.com/all-selector/)。因此，如果您双击其中一个段落，该事件将被触发三次，一次是 ，一次是 <body>，一次是 <html>，从而产生这种“不希望的”行为。如果您的  之一在里面，比方说 <div>，该事件将被触发四次。防止这种情况的一种方法是停止事件传播。

$( 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>

Answer 2

这是因为 $("*").dblclick() 中的 * 是一个 选择器 ，如 W3Schools 中所述。

其中*表示“所有元素”，引用HTML的DOM结构，<body>也是一个元素，JQuery确实也在其上附加了事件，所以当你说 "when I click a  element" 时，你的实际意思应该是 _"when I click the <body> 元素".

这是因为 <body> 元素的层次结构高于 p 元素，并且事件在该元素上触发，因为它优先于 p body包含。

所以，您的代码运行得非常好。但是，例如，如果您希望 "双击  元素后，只有被单击的元素会消失"，也许您的代码应该如下所示：

$("p").dblclick()

这意味着，找到所有 p 元素并绑定此事件，将符合您的期望。

希望您在试用时告诉我发生了什么！编码愉快！

为什么使用“*”选择器的所有元素都消失了？

Why do all elements disappear with "*" selector?

javascript

jquery