如何隐藏任何DOM元素

Question

我想要隐藏任何被点击的元素。例如，如果单击<p></p>，则应隐藏，或者如果单击<div></div>则应隐藏。我尝试使用：

$(document).ready(function(){
    $("*").click(function(){
        $(this).hide();
    });
});

但是，如果单击一个元素，则会隐藏所有元素。

我如何实现我所描述的目标？

Answer 1

该事件将使DOM冒泡，直到它到达document，然后一切都被隐藏。您可以在事件中使用stopPropagation来阻止冒泡：

$("*").click(function(e) {
    e.stopPropagation();
    $(this).hide();
});

另请注意，向中的每个元素添加事件处理程序并不是一个好主意，因为可能存在千元。相反，使用事件委派将单个处理程序绑定到document：

$(document).on('click', '*', function(e) {
    e.stopPropagation();
    $(this).hide();
});

Example fiddle

Answer 2

作为e.stopPropagation();的替代方式，您还可以只隐藏目标元素：

$("*").click(function(e) {
    $(e.target).hide();
});