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();
}
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.
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)
精彩评论