IE 事件传播与 jQuery 自动完成/jScrollPane 的行为不符

Posted 2023-03-06

【中文标题】IE 事件传播与 jQuery 自动完成/jScrollPane 的行为不符

【英文标题】：IE event propagation not behaving as expected with jQuery autocomplete/jScrollPane

【发布时间】：2011-10-04 08:38:46

【问题描述】：

我有一个使用 ajax 自动完成的文本输入字段。结果显示在带有垂直滚动条的 jScrollPane 面板中。

我遇到了一个特定于 IE 的问题，当用户单击 jscrollPane 下拉列表的滚动条时会触发输入字段的模糊事件（滚动条的向上和向下箭头生成为如下所示的锚标记)。

我的理解是 return false 应该阻止事件传播，我希望这就是为什么 mousedown 和 click 事件都为锚标签返回 false 的原因。这适用于 Firefox 和 Chrome，但不适用于 IE。

虽然下面没有显示，但我也尝试在我的活动中使用以下代码，但无济于事：

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

我想我的第一个问题是：

我是否应该期望停止对一种事件的传播以实际阻止其他类型的事件传播？

即如果触发了返回 false 的 mousedown 事件，这是否会阻止触发模糊或聚焦事件？

如何解决此问题以确保 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();
    

【参考方案1】：

我只在 IE 中遇到同样的问题。

经过数小时的实验和谷歌搜索，我决定在模糊事件和动作之间使用微小的延迟（隐藏列表）。它为触发点击事件提供了时间。然后在单击事件处理程序中，您必须检查是否已安排延迟模糊事件处理，如果是，请取消该处理。

【参考方案2】：

这已经晚了 3 年，但我刚刚发现实际上有一种方法可以让 IE ≤ 8 来做 e.preventDefault() on mousedown 在其他浏览器中所做的事情（这会阻止选择 并且 阻止焦点）：设置unselectable 属性！ http://jsbin.com/yagekiji/1

请注意，与总是建议的解决方法（包括the other one here）不同，这些解决方法总是归结为setTimeout(function() thingIDidntWantFocusStolenFrom.focus(); )，这首先可以防止焦点被mousedown 目标窃取！

unselectable 的有趣之处在于它不是继承的，因此它经常被忽略以支持 selectstart 事件（它会冒泡，e.preventDefault() 会阻止选择但不会 防止焦点），或使用树遍历设置在每个后代元素上（如 the *** answer that first clued me in that this might be possible，或 Tim Down 的 series of nearly identical answers），但实际上您可以设置它在event.target 上mousedown。

（另外，jQuery 票证：http://bugs.jquery.com/ticket/10345）