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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
Javascript中typeof 用法小结
May 12 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
webpack之devtool详解
Feb 10 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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中将网页导出为Word文档的代码
2012/05/25 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
numba提升python运行速度的实例方法
2021/01/25 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
党员干部承诺书范文
2014/03/25 职场文书
教师节活动主持词
2014/04/02 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2014年信用社工作总结
2014/11/25 职场文书
自我检讨报告
2015/01/28 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python