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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
详细介绍Next.js脚手架完整搭建封装
Apr 26 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实现的功能是显示8条基色色带
2006/10/09 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
微信小程序入门教程
2016/11/18 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
法人代表证明书格式
2014/10/01 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL