Question

我正在为自己构建一个调试工具。我想要它做的是在任何元素被点击时放置一个类。

这样的事情：

$('*').click(function(){$(this).toggleClass('debug')});

这实际上有效，除了它为所有元素切换“调试”。

例如：

<body>
<div id='3'>
    <div id='2'>
        <div id='1'></div>
    </div>
</div>
</body>

如果我点击了<div id="1">，它会向<div id="2">和<div id="3">添加一个名为“debug”的课程。

当您点击<div id="1>时，发生了什么，它被视为对所有3的点击，因为从技术上讲，所有div都被点击了。所以我考虑过拥有一个包含所有HTML元素的数组。

到目前为止，我有：

window.v = [];
$('*').click(function(){window.v.push(this)});

之后，它是：

$(window.v[0]).toggleClass('debug');

不幸的是，当这个：

$(window.v[window.v.length]).toggleClass('debug');

...或以上执行，它什么也没做。有时，它会将“debug”类放在body标签上。

所以，我不确定使用数组是否是最佳途径。有没有其他人对如何普遍点击任何元素并在其上放置调试类有任何想法？

提前致谢。

Answer 1

这样做：

$( window ).click(function ( e ) {
    $( e.target ).toggleClass( 'debug' );
});

将点击处理程序绑定到所有 DOM元素是一个坏主意。而是将一个单击处理程序绑定到window对象。你可以这样做，因为点击事件冒泡（DOM树）。要确定单击了哪个元素，请使用e.target。

简单:)

现场演示： http://jsfiddle.net/Ucpzq/1/

Answer 2

取消泡泡：

$('*').click(function(evt) {
    $(this).toggleClass('debug');
    evt.stopPropagation();
});