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


Posted in Javascript onMarch 21, 2012

比如一个网页的聊天室,滚动条会随着内容的增加自动往下滚动。
当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了。
为了实现这个功能,可能大家首先会想到的就是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事件。
Javascript 相关文章推荐
js检测用户输入密码强度
Oct 22 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
js对象关系图 方便dom操作
Mar 18 #Javascript
再谈javascript面向对象编程
Mar 18 #Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 #Javascript
Javascript 面向对象编程(coolshell)
Mar 18 #Javascript
Javascript面向对象编程
Mar 18 #Javascript
javascript 常用功能总结
Mar 18 #Javascript
Jquery实现简单的动画效果代码
Mar 18 #Javascript
You might like
php中static 静态变量和普通变量的区别
2016/12/01 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python语言使用技巧分享
2016/05/31 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
django的csrf实现过程详解
2019/07/26 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Python while true实现爬虫定时任务
2020/06/08 Python
详解python变量与数据类型
2020/08/25 Python
医学生职业规划范文
2014/01/05 职场文书
美容院店长岗位职责
2014/04/08 职场文书
商务英语专业求职信
2014/06/26 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
绿里奇迹观后感
2015/06/15 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书