Ermitteln, ob Benutzer auf Bildlaufleiste oder Inhalt klicken (Onclick für native Bildlaufleiste)

Question

Ich versuche benutzerdefinierte Ereignisse in JQuery zu erstellen, die erkennen sollen, wenn auf eine Bildlaufleiste geklickt wird .
Ich weiß, dass es viele Texte gibt, aber alle meine Fragen sind fettgedruckt und es gibt eine JSFiddle example, an der Sie sofort arbeiten können.

Weil ich nicht in der Funktionalität für diese gebaut gefunden,
Ich hatte eine hasScroll Funktion zu erstellen, zu überprüfen, ob das Element eine Scrollbar hat,

$.fn.hasScroll = function(axis){ 
    var overflow = this.css("overflow"), 
     overflowAxis; 

    if(typeof axis == "undefined" || axis == "y") overflowAxis = this.css("overflow-y"); 
    else overflowAxis = this.css("overflow-x"); 

    var bShouldScroll = this.get(0).scrollHeight > this.innerHeight(); 

    var bAllowedScroll = (overflow == "auto" || overflow == "visible") || 
         (overflowAxis == "auto" || overflowAxis == "visible"); 

    var bOverrideScroll = overflow == "scroll" || overflowAxis == "scroll"; 

    return (bShouldScroll && bAllowedScroll) || bOverrideScroll; 
}; 

und eine inScrollRange Funktion, zu überprüfen, ob die Klicken durchgeführt wurde innerhalb der Scroll-Bereich.

var scrollSize = 18; 

function inScrollRange(event){ 
    var x = event.pageX, 
     y = event.pageY, 
     e = $(event.target), 
     hasY = e.hasScroll(), 
     hasX = e.hasScroll("x"), 
     rX = null, 
     rY = null, 
     bInX = false, 
     bInY = false 

    if(hasY){ 
     rY = new RECT(); 
     rY.top = e.offset().top; 
     rY.right = e.offset().left + e.width(); 
     rY.bottom = rY.top +e.height(); 
     rY.left = rY.right - scrollSize; 

     //if(hasX) rY.bottom -= scrollSize; 
     bInY = inRect(rY, x, y); 
    } 

    if(hasX){ 
     rX = new RECT(); 
     rX.bottom = e.offset().top + e.height(); 
     rX.left = e.offset().left; 
     rX.top = rX.bottom - scrollSize; 
     rX.right = rX.left + e.width(); 

     //if(hasY) rX.right -= scrollSize; 
     bInX = inRect(rX, x, y); 
    } 

    return bInX || bInY; 
} 

Sind alle Scrollbar einheitliche Größen? ZB in Firefox und IE ist es 18px.
Angenommen, es gibt keine benutzerdefinierten Bildlaufleisten, gibt es in einigen Browsern zusätzliche Abstände oder Größen?

Diese Funktionen funktionieren alle (was ich erkennen kann).

Die Erstellung von benutzerdefinierten Ereignissen war ein bisschen schwieriger, aber ich habe es etwas funktionieren. Das einzige Problem ist, dass wenn das angeklickte Element ein mousedown/up-Ereignis hat, das ebenfalls ausgelöst wird.

Ich kann nicht scheinen zu stoppen die anderen Ereignisse auslösen, während gleichzeitig auszulösen, was ich anrufe, die mousedownScroll/mouseupScroll Ereignisse.

$.fn.mousedownScroll = function(fn, data){ 
    if(typeof fn == "undefined" && typeof data == "undefined"){ 
     $(this).trigger("mousedownScroll"); 
     return; 
    } 

    $(this).on("mousedownScroll", data, fn); 
}; 

$.fn.mouseupScroll = function(fn, data){ 
    if(typeof fn == "undefined" && typeof data == "undefined"){ 
     $(this).trigger("mouseupScroll"); 
     return; 
    } 

    $(this).on("mouseupScroll", data, fn); 
}; 

$(document).on("mousedown", function(e){ 
    if(inScrollRange(e)){ 
     $(e.target).trigger("mousedownScroll"); 
    } 
}); 

$(document).on("mouseup", function(e){ 
    if(inScrollRange(e)){ 
     $(e.target).trigger("mouseupScroll"); 
    } 
}); 

$("selector").mousedown(function(e){ 
    console.log("Clicked content."); //Fired when clicking scroller as well 
}); 

$("selector").mousedownScroll(function(e){ 
    console.log("Clicked scroller."); 
}); 

Wie kann ich die anderen „klicken Sie auf“ Ereignisse stoppen auslöst?

Während ich frage, bitte zögern Sie nicht, den Code so viel wie möglich zu optimieren.

Here's a JSFiddle to mess around with.

Der Grund, warum ich mache das, weil eines größeren Plugin Ich entwickle. Es hat ein benutzerdefiniertes Kontextmenü, das angezeigt wird, wenn ich mit der rechten Maustaste auf einen der Scroller klicke. Ich will das nicht. Also dachte ich mir, ich sollte ein Event machen, das nach Scroll-Klicks (Mouse Up/Downs) sucht und dann verhindert, dass das Kontextmenü angezeigt wird. Um das zu erreichen, muss der Scroll-Klick vor dem normalen Klick stehen und, wenn möglich, die normalen Klicks vom Feuern stoppen.

Ich denke nur laut hier, aber vielleicht ist es eine Möglichkeit, alle Funktionen zu erhalten, die an das Element gebunden sind, und schalten Sie dann die Reihenfolge, in der sie hinzugefügt wurden? Ich weiß, dass Funktionen in der Reihenfolge ausgeführt werden, in der sie hinzugefügt wurden (1. hinzugefügt 1. aufgerufen), also könnte, wenn ich diesen Prozess anzapfen könnte, vielleicht die ganze "Registrierung" des Ereignisses zu JQuery einfach vor den Klickereignissen eingefügt werden.

---

^{nur/mouseup verwenden mousedown- können, weil Sie auf eine Scrollbar nicht ausgelöst werden, wenn klicken. Wenn dies falsch ist, geben Sie bitte ein funktionierendes Beispiel/Code}

Answer 1

Sie können diesen Hack wahrscheinlich verwenden.

Sie könnten die mousedown und mouseup Ereignisse versuchen Hijacking und sie, wenn Sie auf eine Scrollbar mit Ihrer benutzerdefinierten angetrieben Funktion zu vermeiden.

$.fn.mousedown = function(data, fn) { 
    if (fn == null) { 
     fn = data; 
     data = null; 
    }  
    var o = fn; 
    fn = function(e){ 
     if(!inScrollRange(e)) { 
      return o.apply(this, arguments); 
     } 
     return; 
    }; 
    if (arguments.length > 0) { 
     return this.bind("mousedown", data, fn); 
    } 
    return this.trigger("mousedown"); 
}; 

Und die inverse für mousedownScroll und mouseupScroll Ereignisse.

$.fn.mousedownScroll = function(data, fn) { 
    if (fn == null) { 
     fn = data; 
     data = null; 
    }  
    var o = fn; 
    fn = function(e){ 
     if(inScrollRange(e)) { 
      e.type = "mousedownscroll"; 
      return o.apply(this, arguments); 
     } 
     return; 
    }; 
    if (arguments.length > 0) { 
     return this.bind("mousedown", data, fn); 
    } 
    return this.trigger("mousedown"); 
}; 

Übrigens, ich denke, die Scrollbar Breite ist eine Betriebssystemeinstellung.

Answer 2

Ich habe es nicht versucht und ich weiß, es wird ein langer Weg sein, aber Sie können Ihre eigenen Scrollbar mit Javascript, HTML und CSS erstellen und tun, dass Sie wissen, wenn jemand in Ihre div (oder Bildlaufleiste) klicken. Hier können Sie sehen, wie Sie eine Bildlaufleiste mit CSS erstellen: http://www.apptools.com/examples/scroller.php

Answer 3

Es sollte darauf hingewiesen werden, dass auf Mac OSX 10.7 +, gibt es keine persistenten Bildlaufleisten. Scroll-Balken erscheinen beim Scrollen und verschwinden, wenn Sie fertig sind. Sie sind auch viel kleiner als 18px (sie sind 7px).

Screenshot: http://i.stack.imgur.com/zdrUS.png

Answer 4

hatte ich das gleiche Problem in einem früheren Projekt, und ich empfehle diese Lösung. Es ist nicht sehr sauber, aber es funktioniert und ich bezweifle, dass wir mit HTML viel besser machen können. Hier sind die zwei Schritte meiner Lösung:

1. Messen Sie die Breite der Bildlaufleiste auf Ihrer Desktop-Umgebung.

Um dies zu erreichen, beim Start der Anwendung, führen Sie die folgenden Dinge:

Fügen Sie das folgende Element für den Körper:

<div style='width: 50px; height: 50px; overflow: scroll'><div style='height: 1px;'/></div>

der Maßnahme mit der inneren div von das zuvor hinzugefügte Element mit jQUery's .width(), und speichern Sie die Breite der Bildlaufleiste irgendwo (die Breite der Scollbar ist 50 - innere Divs mit)

Entfernen Sie das zusätzliche Element ent verwendet, um die Bildlaufleiste zu messen (jetzt, da Sie das Ergebnis haben, entfernen Sie das Element, das Sie dem Körper hinzugefügt haben).

Alle diese Schritte sollten vom Anwender nicht sichtbar sein, und Sie haben die Breite der Scrollbar auf Ihrem OS

Zum Beispiel können Sie dieses Snippet:

var measureScrollBarWidth = function() { 
    var scrollBarMeasure = $('<div />'); 
    $('body').append(scrollBarMeasure); 
    scrollBarMeasure.width(50).height(50) 
     .css({ 
      overflow: 'scroll', 
      visibility: 'hidden', 
      position: 'absolute' 
     }); 

    var scrollBarMeasureContent = $('<div />').height(1); 
    scrollBarMeasure.append(scrollBarMeasureContent); 

    var insideWidth = scrollBarMeasureContent.width(); 
    var outsideWitdh = scrollBarMeasure.width(); 
    scrollBarMeasure.remove(); 

    return outsideWitdh - insideWidth; 
}; 

2. Überprüfen Sie, ob Ein Klick ist auf der Bildlaufleiste.

Nachdem Sie nun die Breite der Scrollbar haben, können Sie mit den Koordinaten des Ereignisses können die Koordinaten des Ereignisses in Bezug auf die Lage Rechtecks ​​Scrollbar berechnen und tolle Dinge perfom ...

Wenn Sie möchten, Wenn Sie die Klicks filtern, können Sie im Handler "false" zurückgeben, um deren Weiterleitung zu verhindern.

Answer 5

Ich werde meine eigene Antwort einreichen und Alexander's answer akzeptieren, weil es perfekt funktioniert und Samuel's answer verbessert, weil es die Scrollbar-Breite korrekt berechnet, was ich auch brauchte.

---

Davon abgesehen, habe ich beschlossen, zwei unabhängige Ereignisse zu machen, anstatt zu überschreiben zu versuchen,/außer Kraft setzen mousedown Veranstaltung JQuery.

Dies gab mir die Flexibilität, die ich brauchte, ohne mit JQuery eigenen Ereignissen zu stören, und war ziemlich einfach zu tun.

• mousedownScroll
• mousedownContent

Im Folgenden sind die beiden Implementierungen Alexander, und meine eigene Verwendung. Beide funktionieren so, wie ich es ursprünglich beabsichtigt hatte, aber das erste ist wahrscheinlich das beste.

---

• Here's a JSFiddle, die Alexanders Antwort + Samuels Antwort implementiert.

  $.fn.hasScroll = function(axis){ 
      var overflow = this.css("overflow"), 
       overflowAxis; 
  
      if(typeof axis == "undefined" || axis == "y") overflowAxis = this.css("overflow-y"); 
      else overflowAxis = this.css("overflow-x"); 
  
      var bShouldScroll = this.get(0).scrollHeight > this.innerHeight(); 
  
      var bAllowedScroll = (overflow == "auto" || overflow == "visible") || 
           (overflowAxis == "auto" || overflowAxis == "visible"); 
  
      var bOverrideScroll = overflow == "scroll" || overflowAxis == "scroll"; 
  
      return (bShouldScroll && bAllowedScroll) || bOverrideScroll; 
  }; 
  
  $.fn.mousedown = function(data, fn) { 
      if (fn == null) { 
       fn = data; 
       data = null; 
      }  
      var o = fn; 
      fn = function(e){ 
       if(!inScrollRange(e)) { 
        return o.apply(this, arguments); 
       } 
       return; 
      }; 
      if (arguments.length > 0) { 
       return this.bind("mousedown", data, fn); 
      } 
      return this.trigger("mousedown"); 
  }; 
  
  $.fn.mouseup = function(data, fn) { 
      if (fn == null) { 
       fn = data; 
       data = null; 
      }  
      var o = fn; 
      fn = function(e){ 
       if(!inScrollRange(e)) { 
        return o.apply(this, arguments); 
       } 
       return; 
      }; 
      if (arguments.length > 0) { 
       return this.bind("mouseup", data, fn); 
      } 
      return this.trigger("mouseup"); 
  }; 
  
  $.fn.mousedownScroll = function(data, fn) { 
      if (fn == null) { 
       fn = data; 
       data = null; 
      }  
      var o = fn; 
      fn = function(e){ 
       if(inScrollRange(e)) { 
        e.type = "mousedownscroll"; 
        return o.apply(this, arguments); 
       } 
       return; 
      }; 
      if (arguments.length > 0) { 
       return this.bind("mousedown", data, fn); 
      } 
      return this.trigger("mousedown"); 
  }; 
  
  $.fn.mouseupScroll = function(data, fn) { 
      if (fn == null) { 
       fn = data; 
       data = null; 
      }  
      var o = fn; 
      fn = function(e){ 
       if(inScrollRange(e)) { 
        e.type = "mouseupscroll"; 
        return o.apply(this, arguments); 
       } 
       return; 
      }; 
      if (arguments.length > 0) { 
       return this.bind("mouseup", data, fn); 
      } 
      return this.trigger("mouseup"); 
  }; 
  
  var RECT = function(){ 
      this.top = 0; 
      this.left = 0; 
      this.bottom = 0; 
      this.right = 0; 
  } 
  
  function inRect(rect, x, y){ 
      return (y >= rect.top && y <= rect.bottom) && 
        (x >= rect.left && x <= rect.right) 
  } 
  
  
  var scrollSize = measureScrollWidth(); 
  
  function inScrollRange(event){ 
      var x = event.pageX, 
       y = event.pageY, 
       e = $(event.target), 
       hasY = e.hasScroll(), 
       hasX = e.hasScroll("x"), 
       rX = null, 
       rY = null, 
       bInX = false, 
       bInY = false 
  
      if(hasY){ 
       rY = new RECT(); 
       rY.top = e.offset().top; 
       rY.right = e.offset().left + e.width(); 
       rY.bottom = rY.top +e.height(); 
       rY.left = rY.right - scrollSize; 
  
       //if(hasX) rY.bottom -= scrollSize; 
       bInY = inRect(rY, x, y); 
      } 
  
      if(hasX){ 
       rX = new RECT(); 
       rX.bottom = e.offset().top + e.height(); 
       rX.left = e.offset().left; 
       rX.top = rX.bottom - scrollSize; 
       rX.right = rX.left + e.width(); 
  
       //if(hasY) rX.right -= scrollSize; 
       bInX = inRect(rX, x, y); 
      } 
  
      return bInX || bInY; 
  } 
  
  $(document).on("mousedown", function(e){ 
      //Determine if has scrollbar(s) 
      if(inScrollRange(e)){ 
       $(e.target).trigger("mousedownScroll"); 
      } 
  }); 
  
  $(document).on("mouseup", function(e){ 
      if(inScrollRange(e)){ 
       $(e.target).trigger("mouseupScroll"); 
      } 
  }); 
  }); 
  
  function measureScrollWidth() { 
      var scrollBarMeasure = $('<div />'); 
      $('body').append(scrollBarMeasure); 
      scrollBarMeasure.width(50).height(50) 
       .css({ 
        overflow: 'scroll', 
        visibility: 'hidden', 
        position: 'absolute' 
       }); 
  
      var scrollBarMeasureContent = $('<div />').height(1); 
      scrollBarMeasure.append(scrollBarMeasureContent); 
  
      var insideWidth = scrollBarMeasureContent.width(); 
      var outsideWitdh = scrollBarMeasure.width(); 
      scrollBarMeasure.remove(); 
  
      return outsideWitdh - insideWidth; 
  }; 
  

• Here's a JSFiddle von dem, was ich stattdessen zu tun beschlossen.

  $.fn.hasScroll = function(axis){ 
      var overflow = this.css("overflow"), 
       overflowAxis, 
       bShouldScroll, 
       bAllowedScroll, 
       bOverrideScroll; 
  
      if(typeof axis == "undefined" || axis == "y") overflowAxis = this.css("overflow-y"); 
      else overflowAxis = this.css("overflow-x"); 
  
      bShouldScroll = this.get(0).scrollHeight > this.innerHeight(); 
  
      bAllowedScroll = (overflow == "auto" || overflow == "visible") || 
       (overflowAxis == "auto" || overflowAxis == "visible"); 
  
      bOverrideScroll = overflow == "scroll" || overflowAxis == "scroll"; 
  
      return (bShouldScroll && bAllowedScroll) || bOverrideScroll; 
  }; 
  
  $.fn.mousedownScroll = function(fn, data){ 
      var ev_mds = function(e){ 
       if(inScrollRange(e)) fn.call(data, e); 
      } 
      $(this).on("mousedown", ev_mds); 
      return ev_mds; 
  }; 
  
  $.fn.mouseupScroll = function(fn, data){ 
      var ev_mus = function(e){ 
       if(inScrollRange(e)) fn.call(data, e); 
      } 
      $(this).on("mouseup", ev_mus); 
      return ev_mus; 
  }; 
  
  $.fn.mousedownContent = function(fn, data){ 
      var ev_mdc = function(e){ 
       if(!inScrollRange(e)) fn.call(data, e); 
      } 
  
      $(this).on("mousedown", ev_mdc); 
  
      return ev_mdc; 
  }; 
  
  $.fn.mouseupContent = function(fn, data){ 
      var ev_muc = function(e){ 
       if(!inScrollRange(e)) fn.call(data, e); 
      } 
      $(this).on("mouseup", ev_muc); 
      return ev_muc; 
  }; 
  
  var RECT = function(){ 
      this.top = 0; 
      this.left = 0; 
      this.bottom = 0; 
      this.right = 0; 
  } 
  
  function inRect(rect, x, y){ 
      return (y >= rect.top && y <= rect.bottom) && 
       (x >= rect.left && x <= rect.right) 
  } 
  
  var scrollSize = measureScrollWidth(); 
  
  function inScrollRange(event){ 
      var x = event.pageX, 
       y = event.pageY, 
       e = $(event.target), 
       hasY = e.hasScroll(), 
       hasX = e.hasScroll("x"), 
       rX = null, 
       rY = null, 
       bInX = false, 
       bInY = false 
  
      if(hasY){ 
       rY = new RECT(); 
       rY.top = e.offset().top; 
       rY.right = e.offset().left + e.width(); 
       rY.bottom = rY.top +e.height(); 
       rY.left = rY.right - scrollSize; 
  
       //if(hasX) rY.bottom -= scrollSize; 
       bInY = inRect(rY, x, y); 
      } 
  
      if(hasX){ 
       rX = new RECT(); 
       rX.bottom = e.offset().top + e.height(); 
       rX.left = e.offset().left; 
       rX.top = rX.bottom - scrollSize; 
       rX.right = rX.left + e.width(); 
  
       //if(hasY) rX.right -= scrollSize; 
       bInX = inRect(rX, x, y); 
      } 
  
      return bInX || bInY; 
  } 
  
  function measureScrollWidth() { 
      var scrollBarMeasure = $('<div />'); 
      $('body').append(scrollBarMeasure); 
      scrollBarMeasure.width(50).height(50) 
       .css({ 
        overflow: 'scroll', 
        visibility: 'hidden', 
        position: 'absolute' 
       }); 
  
      var scrollBarMeasureContent = $('<div />').height(1); 
      scrollBarMeasure.append(scrollBarMeasureContent); 
  
      var insideWidth = scrollBarMeasureContent.width(); 
      var outsideWitdh = scrollBarMeasure.width(); 
      scrollBarMeasure.remove(); 
  
      return outsideWitdh - insideWidth; 
  }; 
  

Answer 6

Stellen Sie sicher, dass der Inhalt Ihrer scollarea vollständig [über] das übergeordnete div füllt.

Dann können Sie zwischen Klicks auf Ihren Content und Klicks auf Ihren Container unterscheiden.

html:

<div class='test container'><div class='test content'></div></div> 
<div id="results">please click</div> 

css:

#results { 
    position: absolute; 
    top: 110px; 
    left: 10px; 
} 

.test { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100px; 
    height: 100px; 
    background-color: green; 
} 

.container { 
    overflow: scroll; 
} 

.content { 
    background-color: red; 
} 

js:

function log(_l) { 
    $("#results").html(_l); 
} 

$('.content').on('mousedown', function(e) { 
    log("content-click"); 
    e.stopPropagation(); 
}); 

$('.container').on('mousedown', function(e) { 
    var pageX = e.pageX; 
    var pageY = e.pageY; 
    log("scrollbar-click"); 
}); 

http://codepen.io/jedierikb/pen/JqaCb

Answer 7

Gelöst:

Eine kürzeste Scrollbar Klick Erkennung ich einfiel, getestet auf IE, Firefox, Chrome.

var clickedOnScrollbar = function(mouseX){ 
    if($(window).outerWidth() <= mouseX){ 
    return true; 
    } 
} 

$(document).mousedown(function(e){ 
    if(clickedOnScrollbar(e.clientX)){ 
    alert("clicked on scrollbar"); 
    } 
}); 

Arbeitsbeispiel: https://jsfiddle.net/s6mho19z/

Answer 8

Die einzige Lösung, die für mich (nur getestet gegen IE11) funktioniert:

$(document).mousedown(function(e){ 
    bScrollbarClicked = e.clientX > document.documentElement.clientWidth || e.clientY > document.documentElement.clientHeight; 

});

Answer 9

Ich brauchte Scrollbar auf mousedown- zu erkennen, aber nicht auf Fenster, sondern auf div, und ich habe Element hatte, die den Inhalt zu füllen, dass ich Größe ohne Scrollbar zu erkennen, wurde mit:

.element { 
    position: relative; 
} 
.element .fill-node { 
    position: absolute; 
    left: 0; 
    top: -100%; 
    width: 100%; 
    height: 100%; 
    margin: 1px 0 0; 
    border: none; 
    opacity: 0; 
    pointer-events: none; 
    box-sizing: border-box; 
} 

dem Code für detect war ähnlich, aber einschließlich @DariuszSikorski answer Offset- und den Knoten verwenden, die im Inneren scrollbaren war:

function scrollbar_event(e, node) { 
    var left = node.offset().left; 
    return node.outerWidth() <= e.clientX - left; 
} 

var node = self.find('.fill-node'); 
self.on('mousedown', function(e) { 
    if (!scrollbar_event(e, node)) { 
     // click on content 
    } 
}); 

Answer 10

verwenden folgende Lösung zu erfassen, wenn der Benutzer die Maus über Elements scrollbar geklickt. Habe nicht getestet, wie es mit der Bildlaufleiste des Fensters funktioniert. Ich denke, Pete's Lösung funktioniert besser mit Fensterrollen.

window.addEventListener("mousedown", onMouseDown); 

function onMouseDown(e) { 
    if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) 
    { 
     // mouse down over scroll element 
    } 
}