2012-08-10 140 views
2

任何关于如何聆听mousedown的建议$(document) div的溢出:滚动滚动条?监听鼠标事件...除了div的溢出:滚动滚动条?

我不知道什么元素滚动条是为了引用它 ...

+0

,看event.target。这将告诉你什么是元素 – MrOBrian 2012-08-10 19:51:02

+0

更改'mousedown'到'点击'建议由@adeneo在[评论](http://stackoverflow.com/questions/11908292/listen-for-mouse-events-except- a-divs-overflowscroll-scrollbar#comment15854666_11908377)为我工作 – anu 2016-11-16 12:24:40

回答

2

您可以检查自己的目标有:

$(document).on('mousedown', function(e) { 
    console.log(e.target); 
}); 

FIDDLE

滚动条不是真的是一个元素,点击处理程序将不起作用,但似乎mousedown被解雇,但只会给你滚动条所属的元素。

要排除滚动条我猜你必须弄清楚它的大小,然后检查mousedown上的鼠标位置,看它是否在滚动条区域内。

+0

以及如何计算滚动条区域? – jedierikb 2012-08-10 20:01:24

+1

这有点复杂,首先你需要创建一些元素,并检查有无滚动条的大小以查找大小(通常为16px,但你永远不知道),那么你需要从事件中获取鼠标位置。 pageX/Y等,最后是元素位置,然后确定鼠标是否在scollbar区域被按下。如果可能的话,点击代替mousedown将会简单得多,因为点击不会在滚动条上触发。 – adeneo 2012-08-10 20:23:31

+0

谢谢。有趣的点击...这是很好的知道。 – jedierikb 2012-08-10 20:27:49

0
<div class='scrollHolder' style='overflow:scroll;'> 
<div class='scrollContent'> 
</div> 
</div> 

$(document).on("mousedown", function(event) 
{ 
    var onScrollbar = false; 
    if (event.target.className == "scrollHolder") 
    { 
     var s_c = $(event.target).children(".scrollContent"); 

     if (event.pageX-s_c.offset().left > s_c.innerWidth()) 
     { 
      onScrollbar = true; 
     } 
    } 
}); 
在你的鼠标按下处理