快捷導(dǎo)航

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了。如下面例子

復(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事件。