jQuery,Click上的Select(any all*)元素

Question

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

像这样的东西:

$('*').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都被点击了.所以我考虑过拥有一个包含所有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/