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