Elsewhere, click an event?

Question

I have an onClick event to change the style. How to change the style back when the user clicks elsewhere on an element?

Both prototypes and script libraries are included. Many of the answers below do not work with them ... The identifier of the element is UNDEFINED, so it cannot be used for reference in javascript.

Thanks, Jan

Answer 1

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

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

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

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

This, of course, is a very simple style, perhaps you need to put it in classes or something else.

Answer 2

When an object clicks on it, it gains focus. When something else is pressed, it will lose focus, causing the onblur event. May not work for all elements, but it will work, say, in <input> .

Answer 3

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

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

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

Answer 4

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

Answer 5

You can associate the onClick event with the body and assign a function that restores the style for this event.

Here is a live example at http://jsbin.com/oxobi3

Answer 6

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

Answer 7

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

Answer 8

Here you can do it in jQuery:

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

If you are not using jQuery, you can still use the basic model - apply onclick event logic at the document level. This will work for elements that do not respond to the blur event.

Answer 9

It has been a long time since I used the prototype, but I hope this helps you (in a sense other than jQuery).

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

Answer 10

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 the screen, and not on your element, the style will change back