I have an onClick event to change style. How to change style back when a user clicks elsewhere of an item?

Both prototype and scriptaculous libraries included.. many of the below answers doesn't work with them... Also ID of an element is UNDEFINED so it can't be used for reference in javascript.

Thanks, Yan

I have an onClick event to change style. How to change style back when a user clicks elsewhere of an item?

Both prototype and scriptaculous libraries included.. many of the below answers doesn't work with them... Also ID of an element is UNDEFINED so it can't be used for reference in javascript.

Thanks, Yan

• javascript
• css
• events

10 Answers 10

I have not tested this in all browsers, but if you don't want to introduce any new js framework, this solution only use CSS:

<ul>
  <li tabindex="1">First</li>
  <li tabindex="2">Second</li>
</ul>

The property tabIndex makes the li element focusable. And the css:

li { color: #F00; }
li:focus { color: #0F0 }

This is of course very basic styling, probably want to put it in classes or whatever.

Great question! You can use "event bubbling", which means that instead of the onclick event on your element, you define an event handler on a higher object (say, document or a table), and there you say something like:

if (event.target === myElement) {
    changeStyle();
} else {
    changeStyleBack();
}

More here (and elsewhere): http://www.southsearepublic/tag/Javascript%20Event%20Bubbling/read

When an item is clicked on it, it gains focus. When something else is clicked on it will lose focus, triggering the onblur event. May not work for all elements, but it would work for, say, <input> elements.

You want the onblur event: "The onblur event occurs when an object loses focus".

You can bind an onClick event on the body and assign the function that restore the style to that event.

There's a live example at http://jsbin./oxobi3

I would use jQuery live event and bind click event using :not selector

Maybe try onclick="function1()" onblur="function2()" or onfocus="function1()" onblur="function2()" in the tag.

Here's how you could do it in jQuery:

$(document).click(function(e) {
  if ($(e.target).is("#specialItem")) {
    $(e.target).addClass("specialClass");
  } else {
    $(#specialItem").removeClass("specialClass");
  }
});

If you're not using jQuery, you can still use the basic model -- apply the onclick event logic at the document level. This will work for items that don't respond to the blur event.

It's been quite a long time since I've used prototype but I hope this helps you (in the non-jQuery sense.)

$(window).observe('click', respondToClick);

function respondToClick(event) {
 var element = event.element();
 if(!($(this) == element)){
     element.addClassName('active');//or do your stuff here
 }


}

My approach

var elsewhere = 1;
$(myelement).bind('hoverin',function(){
    elsewhere = 0;
});
$(myelement).bind('hoverout',function(){
    elsewhere = 1;
});

$('screenarea').click(function(){
    if(elsewhere){
        change-style-back();
    } else{
        change-style();
    }
});

this will make sure that when you click somewhere on screen and its not on your element, then the style will change back