JS無法捕獲捲軸上的mouse up事件的原因猜想

來源:互聯網
上載者:User

比如一個網頁的聊天室,捲軸會隨著內容的增加自動往下滾動。
當使用者滑鼠在捲軸上按下的時候,我們可以假設他(她)正在瀏覽聊天內容,那麼這個時候好的使用者體驗就不能讓捲軸再自動滾動了。
為了實現這個功能,可能大家首先會想到的就是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事件。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.