0

I have a text input field which uses ajax autocompletion. The results are displayed in a jScrollPane panel with a vertical scroll bar.

I'm experiencing an IE specific problem where the blur event of the input field is fired when the user clicks on the scroll bar of the jscrollPane dropdown (the up and down arrows of the scroll bar are generated as anchor tags shown below).

My understanding is return false should stop the event from propagating, which I expect is why the mousedown and click events both return false for the anchor tags. This works fine in Firefox and Chrome but not in IE.

Although not shown below, I have also tried using the following code in my event but to no avail:

    e.preventDefault ? e.preventDefault() : e.stop();
    e.returnValue = false;
    e.stopPropagation();

I guess my first question is:

Should I expect stop propagation on one type of event to actually stop other types of events from propagating?

i.e. if a mousedown event is triggered which returns false, will this prevent blur or focus out events from firing?

How can I work around this problem to ensure IE works the same as Firefox and Chrome?

var rf = function() { return false; };

$('<a></a>')
    .attr({'href':'javascript:;', 'className':'jScrollArrowUp'})
    .css({'width':settings.scrollbarWidth+'px'})
    .html('Scroll up')
    .bind('mousedown', function()
    {
        currentArrowButton = $(this);
        currentArrowDirection = -1;
        onArrowMouseDown();

        return false;
    })
    .bind('click', rf)

$("#InputBox").blur(function(e) {
    hasFocus = 0;
    if (!config.mouseDownOnSelect) {
        hideResultsNow();
    }

2 Answers 2

0

Same issue for me in IE only.

After hours of experiments and googling I decide to use tiny delay between blur event and action (hiding of list). It gives time for click event to be triggered. Then in click event handler you have to check is the delay blur event handling scheduled, if so - cancel that handling.

0

This is 3 years late but I just discovered there is in fact a way to get IE ≤ 8 to do what e.preventDefault() on mousedown does in other browsers (which prevents selection and prevents focus): set the unselectable attribute! http://jsbin.com/yagekiji/1

Note that unlike the workarounds always suggested (including the other one here), which always boil down to setTimeout(function() { thingIDidntWantFocusStolenFrom.focus(); }), this prevents focus from ever being stolen by the mousedown target in the first place!

What's funny about unselectable is that it isn't inherited, so it's often overlooked in favor of the selectstart event (which bubbles, and e.preventDefault() on which prevents selection but doesn't prevent focus), or set on every descendant element with a tree-traversal (like the StackOverflow answer that first clued me in that this might be possible, or Tim Down's series of nearly identical answers), but you can actually just set it on event.target on mousedown.

(Also, jQuery ticket: http://bugs.jquery.com/ticket/10345)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.