Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Unlike you might expect <code>focusin</code> and <code>focusout</code> do bubble up, unlike the regular <code>focus</code> event. The two main ways of dealing with this are: Event delegation, or simply stopping the event from bubbling up.</p> <p>Your fiddle is hard to make sense of (ie: don't know what you're trying to do). The first thing that comes to mind (after moving your JS code to the JavaScript field on jsfiddle) is that you're capturing a <code>focus</code> event in good browsers, and the bubbling <code>focusin</code> in crummy IE. <br/>This can be quite annoying, particularly since IE doesn't support actual event capturing. Nevertheless, here's a (simple, but tested and working) suggestion:</p> <pre><code>function mycb(evt) { evt = evt || window.event;//get event object var from = evt.target || evt.srcElement;//get source if (evt.stopPropagation)//stop event from bubbling { evt.stopPropagation();//shouldn't be necessary, but you never know } else { evt.cancelBubble = true;//stop propagation in IE-lingo } if (from.tagName === 'DIV' || from.tagName === 'SPAN') {//if source was a tag that souldn't fire event, return false; if (evt.preventDefault) { evt.preventDefault(); return false; } evt.returnValue = false; return false; } alert("fired!!!"); } var elem = document.getElementById("mybox"); if( elem.attachEvent ) { elem.attachEvent("onfocusin", mycb); } else { elem.addEventListener("focus", mycb, true); } </code></pre> <p>This code was tested in IE8, fiddle can be found <a href="http://jsfiddle.net/xdjf5/" rel="nofollow">here</a>. <br/>It just so happens I read about this event today, <a href="http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html" rel="nofollow">here</a>. A source worth mentioning, I reckon.</p> <p>Hope this helps</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload