javascript - jQuery，单击时选择(任何所有 *)元素

我正在为自己构建一个调试工具。我想要它做的是，每当单击任何元素时，都会在该元素上放置一个类。

类似这样的事情:

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

这确实有效，只是它为所有元素切换“调试”。

例如:

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

如果我点击<div id="1"> ，它将添加一个名为“debug”的类到 <div id="2">和<div id="3"> .

当您点击 <div id="1> 时会发生什么，它算作对所有 3 个 div 的点击，因为从技术上讲，所有 div 都被点击了。所以我考虑过使用一个数组来保存所有 HTML 元素。

到目前为止，我已经:

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

接下来是:

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

不幸的是，当这个:

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

...或者上面的执行，它没有做任何事情。有时，它会将“debug”类放在 body 标记上。

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

提前致谢。

最佳答案

这样做:

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

将点击处理程序绑定(bind)到所有 DOM 元素不是一个好主意。相反，将一个单击处理程序绑定(bind)到 window 对象。您可以这样做，因为点击事件会冒泡(DOM 树)。为了确定哪个元素被点击，请使用e.target。

就这么简单:)

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

关于javascript - jQuery，单击时选择(任何所有 *)元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7341388/