单击div的滚动条会在IE中触发模糊事件

2021/01/23 01:51 · jquery ·  · 0评论

我有一个像下拉菜单一样的div。因此,当您单击按钮时,它会弹出,并允许您滚动浏览此大列表。因此,div具有垂直滚动条。如果您在div外部单击(即模糊),则div应该消失了。

问题在于,当用户单击div的滚动条时,IE会错误地触发onblur事件,而Firefox不会。我认为Firefox仍会将滚动条视为div的一部分,我认为这是正确的。我只希望IE行为相同。

当您单击滚动条时,IE触发模糊事件也遇到类似的问题。显然,它仅在IE7及以下版本以及IE8在quirksmode下发生。

这是我通过Google找到的

https://prototype.lighthouseapp.com/projects/8887/tickets/248-results-popup-from-ajaxautocompleter-disappear-when-user-clicks-on-scrollbars-in-ie6ie7

基本上,仅当您知道此人单击了文档中除当前关注的div之外的某个位置时,才进行模糊处理。可以反向检测滚动条的单击,因为单击滚动条时document.onclick不会触发。

我在自动完成下拉菜单中的滚动条遇到了类似的问题。由于下拉列表在与表单元素相连的表单失去焦点时应该被隐藏,因此保持对正确元素的关注成为问题。单击滚动条时,只有Firefox(10.0)会将焦点放在输入元素上。IE(8.0),Opera(11.61),Chrome(17.0)和Safari(5.1)都从输入中删除了焦点,导致下拉菜单被隐藏,并且由于被隐藏,因此单击事件不会在下拉菜单上触发。

幸运的是,在大多数有问题的浏览器中,可以轻松防止焦点转移。这是通过取消默认浏览器操作来完成的:

dropdown.onmousedown = function(event) {
    // Do stuff
    return false;
}

向事件处理程序添加返回值可以解决除IE之外的所有浏览器上的问题。这样做会取消默认的浏览器操作,在这种情况下为焦点转移。同样,使用mousedown而不是click意味着事件处理程序将在模糊事件在输入元素上触发之前执行。

剩下的唯一问题就是IE(这不足为奇)。事实证明,没有办法取消IE上的焦点转移。幸运的是,IE是唯一在下拉菜单上触发焦点事件的浏览器,这意味着可以使用IE专有的事件处理程序恢复对输入元素的焦点:

dropdown.onfocus = function() {
    input.focus();
}

IE的此解决方案不是完美的,但是虽然焦点偏移无法取消,但这是您可以做的最好的事情。发生的情况是,模糊事件在输入上触发,隐藏了下拉列表,然后焦点移到了现在隐藏的下拉列表上,这将焦点重新集中在输入上并触发显示该下拉列表。在我的代码中,它还会触发重新填充下拉列表,从而导致短暂的延迟和选择的丢失,但是如果用户想滚动选择,则无论如何可能都是无用的,因此我认为这是可以接受的。

我希望这会有所帮助,即使我的示例与问题稍有不同。从我收集到的信息来看,问题是IE在下拉列表本身上触发了一个模糊事件,而不是打开它的按钮,这对我来说是没有意义的。就像我对焦点事件处理程序的使用所指示的那样,单击滚动条应将焦点移到滚动条在IE上的一部分。

答案较晚,但我遇到了同样的问题,当前答案对我不起作用。

popup元素的悬停状态按预期工作,因此在您的blur事件中,您可以检查一下popup元素是否悬停,只有在没有悬停时才将其删除/隐藏:

$('#element-with-focus').blur(function()
{
    if ($('#popup:hover').length === 0)
    {
        $('#popup').hide()
    }
}

您需要将焦点移回到绑定了模糊事件的原始元素上。这不会干扰滚动:

$('#popup').focus(function(e)
{
    $('#element-with-focus').focus();
});

不适用于IE7或更低版​​本-因此,请放弃对此的支持...

示例:http//jsfiddle.net/y7AuF/

这是一个古老的问题,但是由于它仍然适用于IE11,所以这就是我所做的。

我听菜单上的mousedown事件并在此事件上设置一个标志。捕获模糊事件时,如果mousedown标志处于打开状态,则将焦点重新设置。由于Edge,FF和Chrome不会触发模糊事件,但会触发mouseup事件(IE将不会触发),因此我为它们重置了mouseup的mousedown标志(对于IE则是重置)。

  mousedown: function (e) {
      this.mouseddown = true;
      this.$menu.one("mouseup", function(e){
        // IE won't fire this, but FF and Chrome will so we reset our flag for them here
        this.mouseddown = false;
      }.bind(this));
    }

 blur: function (e) {
      if (!this.mouseddown && this.shown) {
        this.hide();
        this.focused = false;        
      } else if (this.mouseddown) {
        // This is for IE that blurs the input when user clicks on scroll.
        // We set the focus back on the input and prevent the lookup to occur again
        this.skipShowHintOnFocus = true; // Flag used to avoid repopulating the menu
        this.$element.focus();
        this.mouseddown = false;    
      } 
    },

这样,菜单将保持可见状态,并且用户不会丢失任何内容。

使用聚焦和聚焦(IE特定事件)

$(document).bind('focusout', function(){
     preventHiding = false;
     //trigger blur event
     this.$element.trigger('blur');

});

$(document).bind('focusin', function(){
     preventHiding = true;
});

$(document).bind('blur', function(){
       // Did anyone want us to prevent hiding?
       if (this.preventHiding) {
         this.preventHiding = false;
         return;
       }
       this.hide();
});

我有同样的问题。通过将菜单放入环绕式(更大)的div中来解决。通过将模糊应用于包装器,它可以正常工作!

也许尝试将tabindex属性集添加-1div节点。

我认为这不是IE问题。

更多情况是如何设计交互以及在哪里处理哪个事件。如果相关目标具有唯一的css-class-accessor,则可以通过检查event.relatedTarget的classList中要允许或不允许启动模糊事件的元素来取消模糊事件。从我的ES2015项目中的自定义自动完成下拉列表中查看我的onBlurHandler(您可能需要变通以contains()获得较旧的JS支持):

onBlurHandler(event: FocusEvent) {
  if (event.relatedTarget 
      && (event.relatedTarget as HTMLElement).classList.contains('folding-select-result-list')) {
    // Disallow any blur event from `.folding-select-result-list`
    event.preventDefault();
  } else if (!event.relatedTarget
      || event.relatedTarget 
      && !(event.relatedTarget as HTMLElement).classList.contains('select-item')) {
    // If blur event is from outside (not `.select-item`), clear the suggest list
    // onClickHandler of `.select-item` will clear suggestList as configured with this.clearAfterSelect
    this.clearOptions(this.clearAfterBlur);
  }
}
  • .folding-select-result-list 是我的建议下拉菜单中有“空点”和“可能是滚动条”,在这里我不需要此模糊事件。
  • .select-item有它自己的onClickHandler触发该选择的XHR请求,并关闭下拉当组件的另一个属性this.clearAfterSelecttrue
本文地址:http://jquery.askforanswer.com/danjidivdegundongtiaohuizaiiezhongchufamohushijian.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!