识别滚动条上的mousedown mouseup事件

xiaokai 发布于2019-08-22 10:34 / 1783人阅读

摘要：当用户鼠标在滚动条上按下的时候，我们可以假设他她正在浏览网页内容，那么这个时候好的用户体验就不能让滚动条再自动滚动了。为了实现这个功能，可能大家首先会想到的就是和事件了。

转载请注明出处：https://github.com/xinglie/xi...

网页内容区域自动滚动，滚动条会随着内容的增加自动往下滚动。

当用户鼠标在滚动条上按下的时候，我们可以假设他（她）正在浏览网页内容，那么这个时候好的用户体验就不能让滚动条再自动滚动了。

为了实现这个功能，可能大家首先会想到的就是mouse down 和 mouse up事件了。

嗯，我们可以利用它，我们还要识别滚动条的宽度及所在位置，于是我们有了这样的一个方法：

var getScrollbar=function(){
    var e=document.documentElement,
        ow=e.offsetWidth,
        cw=e.clientWidth;

    return {//需要识别滚动条是在左面还是右面，目前没做处理，简单示例
        left:cw,
        width:ow-cw
    }
}

getScrollbar获取滚动条左侧位置，及滚动条的宽度，接下来我们要注册onmousedown事件，我们注册在document上

var isOnScrollbar;
document.onmousedown=function(e){
    e=e||window.event;
    var bar=getScrollbar();
    if(e.clientX>bar.left){

        isOnScrollbar=true;
        document.title="mousedown on scroll bar";
    }
}

我们发现这段代码可以在IE FF下正常运行，接下来注册mouseup

document.onmouseup=function(e){
    if(isOnScrollbar){
        document.title="mousedup";
    }else{
        document.title="mousedup on body";
    }
    isOnScrollbar=false;
}

发现除IE外其它浏览器都可以正常工作，IE不行，尝试跟踪mousemove事件：

document.onmousemove=function(){
    window.status=new Date().getTime();
}

发现鼠标在滚动条上按下后移动,mousemove是不触发的，而其它浏览器是正常触发，猜测IE在拖动滚动条开始时

setCapture了，导致其它事件不能正常运行，不过发现鼠标在mouseup后，mousemove会触发一次，我们可以利用这个

来hack IE下的问题

if(document.attachEvent){
    document.onmousemove=function(){
        if(isOnScrollbar){
            isOnScrollbar=false;
            document.title="mousedup";
        }
    }
}

最终的测试如下：

aa

本例只是抛砖引玉，只提供一个简单的思路，没有严格的测试，也许在其它浏览器下有问题，欢迎留言交流

欢迎试用magix，区块化管理利器 https://github.com/thx/magix/...
magix https://github.com/thx/magix
欢迎star与fork

云服务器 GPU云服务器滚动事件 java滚动条的事件图像识别在人脸识别上的应用识别证件上的文字内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90858.html

JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点

摘要：焦点事件一般利用这些事件与方法和属性配合。此外，支持一个名为的类似事件，也是在鼠标滚动滚轮时除法。焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有： blur：元素失去焦点，不会冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin； DOMFocusOut：同...

clasnake 2019-08-19 17:23 评论0 收藏0
JS事件浅析

摘要：事件有很多，有我用过的有我没用过的，今天我想分析一番。阻止默认事件，表单提交，标签。触发事件的元素，事件委托会用到。在文本插入文本框之前会触发事件。一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一...

klivitamJ 2019-08-20 18:16 评论0 收藏0
JS事件浅析

摘要：事件有很多，有我用过的有我没用过的，今天我想分析一番。阻止默认事件，表单提交，标签。触发事件的元素，事件委托会用到。在文本插入文本框之前会触发事件。一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用js去调用dom上的事件。事件有很多，有我用过的有我没用过的，今天我想分析一...

youkede 2019-08-01 17:14 评论0 收藏0
JavaScript 编程精解中文第三版十五、处理事件

摘要：事件与节点每个浏览器事件处理器被注册在上下文中。事件对象虽然目前为止我们忽略了它，事件处理器函数作为对象传递事件对象。若事件处理器不希望执行默认行为通常是因为已经处理了该事件，会调用事件对象的方法。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Handling Events 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分...

Clect 2019-08-23 18:19 评论0 收藏0