如何隐藏任何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();
});

另请注意，为DOM中的每个元素添加事件处理程序并不是一个好主意，因为可能有数千个 。 而是使用事件委托将单个处理程序绑定到document ：

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

示例小提琴

Answer 2

作为e.stopPropagation();的另一种方式e.stopPropagation(); ，您也可以只隐藏目标元素：

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