JS無法捕獲滾動條上的mouse up事件的原因猜想
更新時間：2012年03月21日 11:14:29 作者：
當(dāng)用戶鼠標(biāo)在滾動條上按下的時候，我們可以假設(shè)他（她）正在瀏覽聊天內(nèi)容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了
比如一個網(wǎng)頁的聊天室，滾動條會隨著內(nèi)容的增加自動往下滾動。
當(dāng)用戶鼠標(biāo)在滾動條上按下的時候，我們可以假設(shè)他（她）正在瀏覽聊天內(nèi)容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了。
為了實現(xiàn)這個功能，可能大家首先會想到的就是mouse down 和 mouse up事件了。
可是具體實現(xiàn)的時候我們會發(fā)現(xiàn)在滾動條上按下鼠標(biāo)左鍵再松開的時候，捕獲不到mouse up了。如下面例子
<html>
<head>
<title></title>
<script type="text/javascript">
var captureTarget = null;
function down(obj, e) {
captureTarget = obj;
// 如果是IE可以打開注釋
// captureTarget.setCapture();
e = e ? e : window.event;
}
function up(obj,e) {
// if (captureTarget)
// captureTarget.releaseCapture();
e = e ? e : window.event;
div2.innerText = e.srcElement.tagName;
}
document.addListener = function(event, callback) {
if (!document.all)
this.addEventListener(event, callback);
else
this.attachEvent("on"+event, callback);
}
document.addListener("mouseup", function(){alert(1);});
</script>
</head>
<body >
<div style="width:200px;height:200px;overflow:scroll" onmousedown="down(this, event);">
<div style="height:500px; width:500px"></div>
</div>
</body>
</html>
保存為html格式文件，瀏覽器打開，然后在滾動條上左鍵點擊試試，再在其他地方點擊試試。
由于沒有深入研究過W3C的文檔，這里只能猜想。
考慮到滾動條的特性，可能瀏覽器在鼠標(biāo)按下滾動條的時候給滾動條setCapture了，而鼠標(biāo)松開之后給他releaseCapture，滾動條又不屬于Dom對象，所以在鼠標(biāo)釋放之前無法捕獲mouseup事件。
當(dāng)用戶鼠標(biāo)在滾動條上按下的時候，我們可以假設(shè)他（她）正在瀏覽聊天內(nèi)容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了。
為了實現(xiàn)這個功能，可能大家首先會想到的就是mouse down 和 mouse up事件了。
可是具體實現(xiàn)的時候我們會發(fā)現(xiàn)在滾動條上按下鼠標(biāo)左鍵再松開的時候，捕獲不到mouse up了。如下面例子
復(fù)制代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript">
var captureTarget = null;
function down(obj, e) {
captureTarget = obj;
// 如果是IE可以打開注釋
// captureTarget.setCapture();
e = e ? e : window.event;
}
function up(obj,e) {
// if (captureTarget)
// captureTarget.releaseCapture();
e = e ? e : window.event;
div2.innerText = e.srcElement.tagName;
}
document.addListener = function(event, callback) {
if (!document.all)
this.addEventListener(event, callback);
else
this.attachEvent("on"+event, callback);
}
document.addListener("mouseup", function(){alert(1);});
</script>
</head>
<body >
<div style="width:200px;height:200px;overflow:scroll" onmousedown="down(this, event);">
<div style="height:500px; width:500px"></div>
</div>
</body>
</html>
保存為html格式文件，瀏覽器打開，然后在滾動條上左鍵點擊試試，再在其他地方點擊試試。
由于沒有深入研究過W3C的文檔，這里只能猜想。
考慮到滾動條的特性，可能瀏覽器在鼠標(biāo)按下滾動條的時候給滾動條setCapture了，而鼠標(biāo)松開之后給他releaseCapture，滾動條又不屬于Dom對象，所以在鼠標(biāo)釋放之前無法捕獲mouseup事件。
相關(guān)文章
url取值的比較不錯的思路，一般都是這樣的話，或直接先將？替換成統(tǒng)計分隔符，js數(shù)組一定要特別熟悉。2009-02-02
這篇文章主要介紹了js用拖動滑塊來控制圖片大小的方法,實例分析了javascript使用鼠標(biāo)事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
js+canvas實現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
屏蔽鼠標(biāo)右鍵、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格鍵
js 防止刷新網(wǎng)頁、禁止后退,右鍵等操作的代碼2010-03-03
微信小程序如何在頁面跳轉(zhuǎn)時進(jìn)行頁面導(dǎo)航
小程序能夠在不同的頁面進(jìn)行跳轉(zhuǎn)切換,路由起到了至關(guān)重要的作用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何在頁面跳轉(zhuǎn)時進(jìn)行頁面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-09-09
Antd?ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案
這篇文章主要介紹了Antd?ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案,本文通過復(fù)現(xiàn)代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了JS保留兩位小數(shù) 四舍五入函數(shù)的小例子，有需要的朋友可以參考一下2013-11-11
JS+CSS實現(xiàn)仿觸屏手機撥號盤界面及功能模擬完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)仿觸屏手機撥號盤界面及功能模擬完整實例,可以實現(xiàn)逼真模擬手機撥號盤界面并實現(xiàn)點擊輸入對應(yīng)號碼的功能,需要的朋友可以參考下2015-05-05
這篇文章主要給大家介紹了關(guān)于JavaScript塊級作用域綁定的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12
javascript拖曳互換div的位置實現(xiàn)示例
一個div拖動互換位置的demo，還有很大優(yōu)化的空間，利用dom元素的dragstart/ondragover/ondrop事件完成，感興趣的可以了解一下2021-06-06