IE 事件传播与 jQuery autocomplete/jScrollPane 的行为不符预期
我有一个使用 ajax 自动完成功能的文本输入字段。结果显示在带有垂直滚动条的 jScrollPane 面板中。
我遇到了一个 IE 特定问题，当用户单击 jscrollPane 下拉列表的滚动条时，会触发输入字段的模糊事件（滚动条的向上和向下箭头生成为锚标记，如下所示）。
我的理解是 return false 应该阻止事件传播，我期望这就是为什么 mousedown 和 click 事件都为锚标记返回 false。这在 Firefox 和 Chrome 中工作正常，但在 IE 中不行。
虽然下面没有显示，但我也尝试在我的事件中使用以下代码，但无济于事：
e.preventDefault ? e.preventDefault() : e.stop();
e.returnValue = false;
e.stopPropagation();
我想我的第一个问题是：
我是否应该期望停止一种类型的事件传播以实际阻止其他类型的事件传播？
即，如果触发 mousedown 事件并返回 false，这是否会阻止模糊或聚焦事件的触发？
如何解决此问题以确保 IE 与 Firefox 和 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();
}
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();
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我只在 IE 中遇到同样的问题。
经过几个小时的实验和谷歌搜索后，我决定在模糊事件和动作（隐藏列表）之间使用微小的延迟。它给出了触发点击事件的时间。然后在单击事件处理程序中，您必须检查是否计划了延迟模糊事件处理，如果是的话 - 取消该处理。
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.
这已经晚了 3 年，但我刚刚发现实际上有一种方法可以让 IE ≤ 8 执行
mousedown上的e.preventDefault()在其他浏览器中所做的事情（其中阻止选择和阻止焦点）：设置unselectable属性！ http://jsbin.com/yagekiji/1请注意，与始终建议的解决方法不同（包括这里是另一个），它总是归结为
setTimeout(function() { thingIDidntWantFocusStolenFrom.focus() })，这首先可以防止焦点被mousedown目标窃取！unselectable的有趣之处在于它不是继承的，因此它经常被忽视，而倾向于selectstart事件（该事件会冒泡，并且e.preventDefault()< /code> 阻止选择，但不阻止焦点），或者通过树遍历设置每个后代元素（例如 StackOverflow 的答案首先让我知道这可能是可能的，或者 Tim Down 的 系列 近相同 answers），但实际上您可以在mousedownevent.target上设置它代码>.（另外，jQuery 票证：http://bugs.jquery.com/ticket/10345）
This is 3 years late but I just discovered there is in fact a way to get IE ≤ 8 to do what
e.preventDefault()onmousedowndoes in other browsers (which prevents selection and prevents focus): set theunselectableattribute! http://jsbin.com/yagekiji/1Note 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 themousedowntarget in the first place!What's funny about
unselectableis that it isn't inherited, so it's often overlooked in favor of theselectstartevent (which bubbles, ande.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 onevent.targetonmousedown.(Also, jQuery ticket: http://bugs.jquery.com/ticket/10345)