FireFox下的滚动条事件捕捉问题

补充：window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);确实是FF下捕捉事件的方法；
至于有没有Event.DOMMouseScroll类型，或者如何捕捉MouseWheel事件我就不知道了，请教大家！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我实现了一个自定义的滚动条，所以当我自定义滚动条和浏览器本身的滚动条都出现时，
先滚动了浏览器的，然后滚动的是我自定义的而我需要的正好相反，所以我需要先捕捉到Firefox的鼠标滚轮事件，并禁用它
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>怎么没有？</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:2000px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var cs = document.getElementById('cs');

if (cs.attachEvent)
cs.attachEvent('onmousewheel', scrollMove);
else if (cs.addEventListener) {
cs.addEventListener('DOMMouseScroll', scrollMove, true);
}
cs = null;
};
var scrollMove = function (e) {
e = window.event || e;
e.stopPropagation && (e.preventDefault(), e.stopPropagation()) || (e.cancelBubble = true, e.returnValue = false); //取消默认滚动
};
</script>
</head>
<body>
<div id="cs" style="margin-top:50px;width:500px;height:200px; overflow:hidden; border:#000000 1px solid;">
<script type="text/javascript">
!function () {
for (var i = 0, a = [] ; i < 201 ; i ++) a[i] = i;
document.write(a.join('<br \/>'));
}();
</script>
</div>
<div style="position:absolute;left:481px;top:50px; width:20px; height:10px;font-size:10px; background-color:#000000;"> </div>
</body>
</html>
if(window.captureEvents){
  window.captureEvents(Event.DOMMouseScroll);//这里是我写的代码；
} 这个东西,我接触DOM到现在从来没用过它.
貌似它已经被废弃了吧.在DOM2里...反正没它也能捕获..貌似
FF默认就是setCaputreFF右键貌似没有captrue(JK前辈所说,测试的确如此)而IE默认不是capture
所以需要
.setCaputre来捕获下...写过拖拽应该会主要到这个差别.
因为FF,按住鼠标左键从元素上,然后滑到浏览器外在松开...也会触发mouseup
而IE有些情况下不会.
但是
IE:设置了
setCapture则也会捕获到mouseup
以下代码,稍微做了下wheel同步,没有做drag...
好啦...回家啃饭...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>scroll</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:2000px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var cs = document.getElementById('cs'), pf = document.getElementById('pf');
if (cs.attachEvent)
cs.attachEvent('onmousewheel', scrollMove);
else if (cs.addEventListener) {
cs.addEventListener('DOMMouseScroll', scrollMove, true);
}
cs.scrollTop = 0;
pf.style.height = Math.max(cs.clientHeight / cs.scrollHeight * cs.clientHeight, 6) + 'px';
cs = pf = null; //非必要
};
var scrollMove = function (e) {
var e = window.event || e, o = e.srcElement || e.target, d = -e.wheelDelta || e.detail;

o.scrollTop = o.scrollTop + d / Math.abs(d) * Math.floor(o.clientHeight * 0.15);
document.getElementById('pf').style.top = 51 + Math.round(o.scrollTop / o.scrollHeight * o.clientHeight) + 'px';
e.stopPropagation && (e.preventDefault(), e.stopPropagation()) || (e.cancelBubble = true, e.returnValue = false); //取消默认滚动
};
</script>
</head>
<body>
<div id="cs" style="margin-top:50px;width:500px;height:200px; overflow:hidden; border:#000000 1px solid;">
<script type="text/javascript">
!function () {
for (var i = 0, a = [] ; i < 201 ; i ++) a[i] = i;
document.write(a.join('<br \/>'));
}();
</script>
</div>
<div id="pf" style="position:absolute;left:481px;top:50px; width:20px; height:10px;font-size:10px; background-color:#6699CC; border:#CCCCCC 1px solid;"> </div>
</body>
</html>
muxrwc提供的方法是可行的，非常感谢！那么对于这类如何释放上面的捕捉呢？
释放,我已经写上了,只有IE才涉及释放的问题..就是o.releaseCapture
FF不需要释放:D
楼主：您的答案已经解决我的问题，等结贴一定给分，现在还有一个相关的，想请教你虽然FF下鼠标移出事件监听的对象范围后可以移动流浪其本身的滚动条；而我则需要的是在自己定义的滚动条滚动到最底部时再滚动浏览器本身的滚动条；在IE下我使用releaseCapture即可，而在FF下如果不采用类似releaseEvents的话则当鼠标还未移出监听事件对象的时候无法滚动浏览器的滚动条，就像你上面写的示例代码，当滚动到最下面的时候，如果鼠标不移出那个DIV则无法滚动外面的，而我想当滚动在最下面的时候（自己代码判断）即使鼠标还在DIV防伪内也可以滚动浏览器的，有什么方式吗？比如类似window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP|Event.STARTSELECT);？
楼主：您的答案已经解决我的问题，等结贴一定给分，现在还有一个相关的，想请教你虽然FF下鼠标移出事件监听的对象范围后可以移动流浪其本身的滚动条；而我则需要的是在自己定义的滚动条滚动到最底部时再滚动浏览器本身的滚动条；在IE下我使用releaseCapture即可，而在FF下如果不采用类似releaseEvents的话则当鼠标还未移出监听事件对象的时候无法滚动浏览器的滚动条，就像你上面写的示例代码，当滚动到最下面的时候，如果鼠标不移出那个DIV则无法滚动外面的，而我想当滚动在最下面的时候（自己代码判断）即使鼠标还在DIV防伪内也可以滚动浏览器的，有什么方式吗？比如类似window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP|Event.STARTSELECT);？
楼主：您的答案已经解决我的问题，等结贴一定给分，现在还有一个相关的，想请教你虽然FF下鼠标移出事件监听的对象范围后可以移动流浪其本身的滚动条；而我则需要的是在自己定义的滚动条滚动到最底部时再滚动浏览器本身的滚动条；在IE下我使用releaseCapture即可，而在FF下如果不采用类似releaseEvents的话则当鼠标还未移出监听事件对象的时候无法滚动浏览器的滚动条，就像你上面写的示例代码，当滚动到最下面的时候，如果鼠标不移出那个DIV则无法滚动外面的，而我想当滚动在最下面的时候（自己代码判断）即使鼠标还在DIV防伪内也可以滚动浏览器的，有什么方式吗？比如类似window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP|Event.STARTSELECT);？
这个和捕获有什么关系?
因为阻止了默认的事件,才会阻止默认的滚动事件..如果达到条件了,就不阻止默认事件就好了...
可以参考下面的例子.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>scroll</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    height:2000px;
}
</style>
<script type="text/javascript">
window.onload = function () {
    var cs = document.getElementById('cs'), pf = document.getElementById('pf');
    if (cs.attachEvent)
        cs.attachEvent('onmousewheel', scrollMove);
    else if (cs.addEventListener) {
        cs.addEventListener('DOMMouseScroll', scrollMove, true);
    }
    cs.scrollTop = 0;
    pf.style.height = Math.max(cs.clientHeight / cs.scrollHeight * cs.clientHeight, 6) + 'px';
    cs = pf = null; //非必要
};
var scrollMove = function (e) {
    var e = window.event || e, o = e.srcElement || e.target, d = -e.wheelDelta || e.detail;

    o.scrollTop = o.scrollTop + d / Math.abs(d) * Math.floor(o.clientHeight * 0.15);
    document.getElementById('pf').style.top = 51 + Math.round(o.scrollTop / o.scrollHeight * o.clientHeight) + 'px';
    ((o.scrollTop + o.clientHeight) != o.scrollHeight) //没有问题的话取消默认滚动
&& (e.preventDefault && e.preventDefault() || (e.returnValue = false));
};
</script>
</head>
<body>
<div id="cs" style="margin-top:50px;width:500px;height:200px; overflow:hidden; border:#000000 1px solid;">
<script type="text/javascript">
!function () {
    for (var i = 0, a = [] ; i < 201 ; i ++) a[i] = i;
    document.write(a.join('<br \/>'));
}();
</script>
</div>
<div id="pf" style="position:absolute;left:481px;top:50px; width:20px; height:10px;font-size:10px; background-color:#6699CC; border:#CCCCCC 1px solid;"> </div>
</body>
</html>
抱歉写错了..忘记考虑返回值了,不过那个不影响...但是还是改一下....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>scroll</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    height:2000px;
}
</style>
<script type="text/javascript">
window.onload = function () {
    var cs = document.getElementById('cs'), pf = document.getElementById('pf');
    if (cs.attachEvent)
        cs.attachEvent('onmousewheel', scrollMove);
    else if (cs.addEventListener) {
        cs.addEventListener('DOMMouseScroll', scrollMove, true);
    }
    cs.scrollTop = 0;
    pf.style.height = Math.max(cs.clientHeight / cs.scrollHeight * cs.clientHeight, 6) + 'px';
    cs = pf = null; //非必要
};
var scrollMove = function (e) {
    var e = window.event || e, o = e.srcElement || e.target, d = -e.wheelDelta || e.detail;

    o.scrollTop = o.scrollTop + d / Math.abs(d) * Math.floor(o.clientHeight * 0.15);
    document.getElementById('pf').style.top = 51 + Math.round(o.scrollTop / o.scrollHeight * o.clientHeight) + 'px';
    ((o.scrollTop + o.clientHeight) != o.scrollHeight) //没有问题的话取消默认滚动
        && (e.preventDefault && (e.preventDefault(), 1) || (e.returnValue = false));
};
</script>
</head>
<body>
<div id="cs" style="margin-top:50px;width:500px;height:200px; overflow:hidden; border:#000000 1px solid;">
<script type="text/javascript">
!function () {
    for (var i = 0, a = [] ; i < 201 ; i ++) a[i] = i;
    document.write(a.join('<br \/>'));
}();
</script>
</div>
<div id="pf" style="position:absolute;left:481px;top:50px; width:20px; height:10px;font-size:10px; background-color:#6699CC; border:#CCCCCC 1px solid;"> </div>
</body>
</html>
消取默认动作（如滚动），无非就是：
//假设e是window.event或FF下event参数
e.returnValue = false;
if(e.preventDefault) e.preventDefalut();