識別滾動條上的mousedown mouseup事件

xiaokai 發布于2019-08-22 10:34 / 1811人閱讀

摘要：當用戶鼠標在滾動條上按下的時候，我們可以假設他她正在瀏覽網頁內容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了。為了實現這個功能，可能大家首先會想到的就是和事件了。

轉載請注明出處：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滾動條的事件圖像識別在人臉識別上的應用識別證件上的文字內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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