首頁 web前端 js教程 JS无法捕获滚动条上的mouse up事件的原因猜想_javascript技巧

JS无法捕获滚动条上的mouse up事件的原因猜想_javascript技巧

May 16, 2016 pm 05:55 PM
mouse 捲軸

比如一个网页的聊天室,滚动条会随着内容的增加自动往下滚动。
当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。
为了实现这个功能,可能大家首先会想到的就是mouse down 和 mouse up事件了。
可是具体实现的时候我们会发现在滚动条上按下鼠标左键再松开的时候,捕获不到mouse up了。如下面例子

复制代码 代码如下:













保存为html格式文件,浏览器打开,然后在滚动条上左键点击试试,再在其他地方点击试试。
由于没有深入研究过W3C的文档,这里只能猜想。
考虑到滚动条的特性,可能浏览器在鼠标按下滚动条的时候给滚动条setCapture了,而鼠标松开之后给他releaseCapture,滚动条又不属于Dom对象,所以在鼠标释放之前无法捕获mouseup事件。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1246
24
微軟將 Windows 11 的 Fluent 捲軸引入 Google Chrome 微軟將 Windows 11 的 Fluent 捲軸引入 Google Chrome Apr 14, 2023 am 10:52 AM

與 Windows 10 不同,Windows 11 具有新的現代“流暢捲軸”,當使用者與之互動時會改變形狀。 Fluent 捲軸本質上是動態的,它們會在不同的外形尺寸或當您更改視窗大小時自動縮放,並且它目前在設定、媒體播放器等應用程式中使用。根據微軟的一項新提議,Google瀏覽器可能很快就會擁有流暢的捲軸功能。微軟在一份提案中表示,他們希望對 Chrome 中的舊捲軸進行現代化

react怎麼隱藏捲軸滾動 react怎麼隱藏捲軸滾動 Dec 21, 2022 pm 03:38 PM

react隱藏滾動條滾動的方法:1、開啟對應的「react-native」檔案;2、透過horizo​​ntal設定水平滾動;3、透過設定「showsHorizo​​ntalScrollIndicator」的值為「false」來隱藏水平捲軸即可。

Zerømouse:YouTuber 打造 16 g 遊戲滑鼠,你可以買一個 — 有點 Zerømouse:YouTuber 打造 16 g 遊戲滑鼠,你可以買一個 — 有點 Aug 16, 2024 pm 03:42 PM

超輕量遊戲滑鼠的世界最近才真正起飛,甚至連Cooler Master 和Logitech 等主流遊戲週邊製造商也加入了這一行列,推出了售價25.99 美元的Cooler Master MM711 和105.99 美元的Logitech G Pro X Superlight滑鼠。

Mac系統捲軸怎麼設定始終顯示-捲軸設定始終顯示的方法 Mac系統捲軸怎麼設定始終顯示-捲軸設定始終顯示的方法 Mar 18, 2024 pm 06:22 PM

近日有一些小夥伴諮詢小編Mac系統滾動條怎麼設定始終顯示?下面就為大家帶來了Mac系統滾動條設定始終顯示的方法,有需要的小伙伴可以來了解了解哦。第一步:在系統開始選單,選擇【系統偏好設定】選項。第三步:在系統偏好設定頁面,選擇【通用】選項。第三步:在通用頁面,選擇【始終】顯示捲軸。

如何在 Windows 11 中啟用或停用捲軸始終顯示? 如何在 Windows 11 中啟用或停用捲軸始終顯示? Apr 24, 2023 pm 05:58 PM

當捲軸未啟動或未使用時,Windows作業系統允許使用者指定是否應自動隱藏它們。另一方面,Windows預設啟用捲軸。如果任何使用者想在他們的系統上啟用或停用此功能,請參閱這篇文章,以幫助他們了解如何操作。如何在Windows11中啟用或停用始終顯示捲軸1.按住Windows+U鍵將開啟系統上的輔助功能頁面。 2.透過點擊它來選擇視覺效果,它位於輔助使用頁面的頂部。 3.如果要在系統上啟用始終顯示捲軸功能,請點擊始終顯示捲軸切換按鈕將其打開,如下所示。 4.您可以隨時透過點擊「始終顯示

Zerømouse:YouTuber 打造 16 g 遊戲滑鼠,你可以買一個 - 有點 Zerømouse:YouTuber 打造 16 g 遊戲滑鼠,你可以買一個 - 有點 Aug 16, 2024 pm 12:48 PM

超輕量遊戲滑鼠的世界最近才真正起飛,甚至連Cooler Master 和Logitech 等主流遊戲週邊製造商也加入了這一行列,推出了售價25.99 美元的Cooler Master MM711 和105.99 美元的Logitech G Pro X Superlight滑鼠。

mouse是哪個鍵 mouse是哪個鍵 Mar 10, 2023 pm 04:21 PM

mouse指涉滑鼠按鍵,有三種:1、mouse1,是指滑鼠左鍵;2、mouse2,是指滑鼠右鍵;3、mouse3,是指滑鼠中鍵,即滾輪。點擊mouse按鈕就代表點擊滑鼠按鍵,例如按壓鍵盤上的MOUSE1鍵等於點擊滑鼠左鍵,而滑鼠左鍵的功能相當於確認鍵,凡是執行選單的指令、選擇文字或圖案、按下對話方塊中的按鈕或選項,都要按下滑鼠左鍵。

如何透過始終顯示捲軸在 Mac 上更輕鬆地滾動 如何透過始終顯示捲軸在 Mac 上更輕鬆地滾動 Apr 17, 2023 am 08:31 AM

如何將捲軸設定為始終可見在現代版本的MacOS中,從Ventura13.0開始,您可以透過執行下列操作將捲軸設定為始終可見:前往Apple選單並選擇「系統設定」前往「外觀」尋找「顯示捲軸」並選擇「始終」旁的開關變更立即可見,您將立即在Mac上任何存在捲軸或捲動區域的地方看到捲軸。無需再猜測,您可以立即直觀地看到可以滾動和不能滾動的位置。

See all articles