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
Aug 13 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
python 中的int()函数怎么用
2017/10/17 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
高级工程师岗位职责
2013/12/15 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
党校毕业个人总结
2015/02/28 职场文书
办公室日常管理制度
2015/08/04 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Nginx速查手册及常见问题
2022/04/07 Servers