admin管理员组

文章数量:1432454

I'm building a debugging tool for myself. What I want it to do is place a class on any element whenever it's clicked.

Something like this:

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

That actually worked, except that it toggles "debug" for ALL elements.

For example:

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

If I clicked on <div id="1">, it will add a class called "debug" to <div id="2"> and <div id="3">.

What's happening is when you click on <div id="1>, it counts as a click to all 3, because technically, all divs were clicked. So I've thought about having an array that holds all the HTML elements.

So far, I have:

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

Following that, it's:

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

Unfortunately, when this:

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

...or the above executes, it doesn't do anything. Sometimes, it places the "debug" class on the body tag.

So, I'm not exactly sure if using an Array is the best route for this. Does anyone else have any ideas on how to universally click on any element and place the debug class on it?

Thanks in advance.

I'm building a debugging tool for myself. What I want it to do is place a class on any element whenever it's clicked.

Something like this:

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

That actually worked, except that it toggles "debug" for ALL elements.

For example:

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

If I clicked on <div id="1">, it will add a class called "debug" to <div id="2"> and <div id="3">.

What's happening is when you click on <div id="1>, it counts as a click to all 3, because technically, all divs were clicked. So I've thought about having an array that holds all the HTML elements.

So far, I have:

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

Following that, it's:

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

Unfortunately, when this:

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

...or the above executes, it doesn't do anything. Sometimes, it places the "debug" class on the body tag.

So, I'm not exactly sure if using an Array is the best route for this. Does anyone else have any ideas on how to universally click on any element and place the debug class on it?

Thanks in advance.

  • javascript
  • jquery
  • html
  • debugging
  • dom
Share Improve this question edited Sep 7, 2011 at 22:59 user1385191 asked Sep 7, 2011 at 22:50 iNkiNk 831 silver badge12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

Do this:

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

Binding click handlers to all DOM elements is a bad idea. Instead, bind one single click handler to the window object. You can do this because click events bubble up (the DOM tree). In order to determine which element was clicked, use e.target.

Simple as that :)

Live demo: http://jsfiddle/Ucpzq/1/

Cancel the bubble:

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

本文标签： JavaScriptJQuerySelect (any all *) element on ClickStack Overflow

版权声明：本文标题：javascript - jQuery, Select (any all *) element on Click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744828114a2627185.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。