DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS無法捕獲滾動條上的mouse up事件的原因猜想
JS無法捕獲滾動條上的mouse up事件的原因猜想
編輯:關於JavaScript     
比如一個網頁的聊天室,滾動條會隨著內容的增加自動往下滾動。
當用戶鼠標在滾動條上按下的時候,我們可以假設他(她)正在浏覽聊天內容,那麼這個時候好的用戶體驗就不能讓滾動條再自動滾動了。
為了實現這個功能,可能大家首先會想到的就是mouse down 和 mouse up事件了。
可是具體實現的時候我們會發現在滾動條上按下鼠標左鍵再松開的時候,捕獲不到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的文檔,這裡只能猜想。
考慮到滾動條的特性,可能浏覽器在鼠標按下滾動條的時候給滾動條setCapture了,而鼠標松開之後給他releaseCapture,滾動條又不屬於Dom對象,所以在鼠標釋放之前無法捕獲mouseup事件。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved