Ein Klick auf die Bildlaufleiste eines Divs löst das Blur-Ereignis in I.E. aus

Question

Ich habe ein Div, das wie ein Dropdown wirkt. Es öffnet sich, wenn Sie auf eine Schaltfläche klicken, und ermöglicht Ihnen, durch diese große Liste zu blättern. Das Div hat also eine vertikale Bildlaufleiste. Das Div soll verschwinden, wenn man außerhalb des Divs klickt, d.h. auf blur.

Das Problem ist, dass wenn der Benutzer auf den Scrollbalken des Divs klickt, IE fälschlicherweise die onblur Ereignis, während Firefox dies nicht tut. Ich schätze, dass Firefox die Bildlaufleiste immer noch als Teil des Divs behandelt, was meiner Meinung nach korrekt ist. Ich möchte nur, dass IE die gleiche Weise zu verhalten.

Answer 1

Ich hatte ein ähnliches Problem mit einer Bildlaufleiste in einem Autovervollständigungs-Dropdown. Da das Dropdown ausgeblendet werden sollte, wenn das Formularelement, an das es angehängt ist, den Fokus verliert, wurde die Beibehaltung des Fokus auf das richtige Element zu einem Problem. Wenn die Bildlaufleiste angeklickt wurde, behielt nur Firefox (10.0) den Fokus auf dem Eingabeelement. IE (8.0), Opera (11.61), Chrome (17.0) und Safari (5.1) entfernten alle den Fokus von der Eingabe, was dazu führte, dass das Dropdown-Element ausgeblendet wurde, und da es ausgeblendet war, wurden keine Klick-Ereignisse für das Dropdown-Element ausgelöst.

Glücklicherweise lässt sich die Fokusverschiebung bei den meisten problematischen Browsern leicht verhindern. Dazu muss die Standardaktion des Browsers abgebrochen werden:

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

Durch Hinzufügen eines Rückgabewerts zum Event-Handler wurde das Problem in allen Browsern außer dem IE behoben. Dadurch wird die Standardaktion des Browsers abgebrochen, in diesem Fall die Fokusverschiebung. Außerdem bedeutete die Verwendung von "mousedown" anstelle von "click", dass der Event-Handler ausgeführt wurde, bevor das "blur"-Ereignis auf dem Eingabeelement ausgelöst wurde.

Damit blieb nur noch der IE als Problem übrig (keine Überraschung). Es stellte sich heraus, dass es keine Möglichkeit gibt, die Fokusverschiebung im IE aufzuheben. Glücklicherweise ist der IE der einzige Browser, der ein Fokus-Ereignis für das Dropdown auslöst, d. h. der Fokus des Eingabeelements kann mit einem IE-exklusiven Event-Handler wiederhergestellt werden:

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

Diese Lösung für den IE ist nicht perfekt, aber da die Fokusverschiebung nicht rückgängig gemacht werden kann, ist dies das Beste, was Sie tun können. Was passiert, ist, dass das Unschärfe-Ereignis auf die Eingabe ausgelöst wird, wodurch das Dropdown ausgeblendet wird, woraufhin der Fokus auf das nun ausgeblendete Dropdown ausgelöst wird, was den Fokus auf die Eingabe wiederherstellt und die Anzeige des Dropdowns auslöst. In meinem Code löst es auch das Wiederauffüllen des Dropdowns aus, was zu einer kurzen Verzögerung und dem Verlust der Auswahl führt, aber wenn der Benutzer scrollen möchte, ist die Auswahl wahrscheinlich sowieso nutzlos, also hielt ich dies für akzeptabel.

Ich hoffe, dies ist hilfreich, auch wenn mein Beispiel etwas anders ist als in der Frage. Von dem, was ich verstanden habe, war die Frage über IE Abfeuern eines blur-Ereignis auf dem Dropdown selbst, anstatt die Schaltfläche, die es geöffnet, die keinen Sinn für mich macht ... Wie meine Verwendung eines Fokus-Ereignishandlers zeigt, sollte ein Klick auf eine Bildlaufleiste den Fokus auf das Element verschieben, zu dem die Bildlaufleiste im IE gehört.

Answer 2

Ich habe ein ähnliches Problem mit dem IE, der das Unschärfe-Ereignis auslöst, wenn Sie auf eine Bildlaufleiste klicken. Anscheinend passiert es nur n IE7 und unten, und IE8 im Quirksmode.

Hier ist etwas, das ich über Google gefunden habe

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

Im Grunde genommen machen Sie den Weichzeichner nur dann, wenn Sie wissen, dass die Person an einer anderen Stelle des Dokuments als dem aktuell fokussierten Div geklickt hat. Es ist möglich, die Scrollbar Klick umgekehrt zu erkennen, weil document.onclick nicht ausgelöst, wenn Sie auf die Bildlaufleiste klicken.

Answer 3

Dies ist eine alte Frage, aber da sie immer noch für IE11 gilt, habe ich Folgendes getan.

Ich höre auf das Mousedown-Ereignis des Menüs und setze ein Flag auf dieses Ereignis. Wenn ich das Blur-Ereignis abfange und das Mousedown-Flag aktiviert ist, setze ich den Fokus zurück. Da Edge, FF und Chrome das Blur-Ereignis nicht auslösen, aber das Mouseup-Ereignis auslösen (was IE nicht tut), setze ich das Mousedown-Flag beim Mouseup für sie zurück (beim Blur für 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;    
      } 
    },

Auf diese Weise bleibt das Menü sichtbar und der Benutzer verliert nichts.

Answer 4

Verwendung von focusout und focusin (IE-spezifische Ereignisse)

$(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();
});

Answer 5

Ich hatte das gleiche Problem. Gelöst, indem Sie das Menü in einem Wrapping (größer) div. Mit der Unschärfe auf den Wrapper angewendet, es funktionierte!