JS无法捕获滚动条上的mouseup事件的原因猜想
2023-06-13 09:14:33 时间
比如一个网页的聊天室,滚动条会随着内容的增加自动往下滚动。
当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。
为了实现这个功能,可能大家首先会想到的就是mousedown和mouseup事件了。
可是具体实现的时候我们会发现在滚动条上按下鼠标左键再松开的时候,捕获不到mouseup了。如下面例子
复制代码代码如下:
当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。
为了实现这个功能,可能大家首先会想到的就是mousedown和mouseup事件了。
可是具体实现的时候我们会发现在滚动条上按下鼠标左键再松开的时候,捕获不到mouseup了。如下面例子
<html>
<head>
<title></title>
<scripttype="text/javascript">
varcaptureTarget=null;
functiondown(obj,e){
captureTarget=obj;
//如果是IE可以打开注释
//captureTarget.setCapture();
e=e?e:window.event;
}
functionup(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>
<divstyle="width:200px;height:200px;overflow:scroll"onmousedown="down(this,event);">
<divstyle="height:500px;width:500px"></div>
</div>
</body>
</html>
保存为html格式文件,浏览器打开,然后在滚动条上左键点击试试,再在其他地方点击试试。
由于没有深入研究过W3C的文档,这里只能猜想。
考虑到滚动条的特性,可能浏览器在鼠标按下滚动条的时候给滚动条setCapture了,而鼠标松开之后给他releaseCapture,滚动条又不属于Dom对象,所以在鼠标释放之前无法捕获mouseup事件。
相关文章
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 【说站】js中scroll事件的两种模式
- 【说站】js子类型重写的注意点
- js事件循环与macroµ任务队列-前端面试进阶
- JS基础-JS内置对象Date详解
- 我的Vue.js生态开源之旅
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- js函数的节流与防抖详解编程语言
- js 异步请求后各种监听事件的处理,如异步请求后click 事件失效详解编程语言
- JS event对象:记录当前事件的状态
- JS onerror事件:错误处理
- JS scroll事件:页面滚动
- 动态控制Table的js代码
- js判断enter事件
- js变量以及其作用域详解
- JS控件事件小结
- js处理json以及字符串的比较等常用操作
- PHP加密函数Javascript/Js解密函数
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- js阻止默认事件与js阻止事件冒泡示例分享js阻止冒泡事件
- JS实现判断滚动条滚到页面底部并执行事件的方法
- Node.js事件循环(EventLoop)和线程池详解
- 引用其它js时如何同时处理多个window.onload事件
- js使用for循环及if语句判断多个一样的name