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默认就是setCaputre FF右键貌似没有captrue(JK前辈所说,测试的确如此) 而IE默认不是capture 所以需要 .setCaputre来捕获下... 写过拖拽应该会主要到这个差别. 因为FF,按住鼠标左键从元素上,然后滑到浏览器外在松开...也会触发mouseup 而IE有些情况下不会. 但是 IE:设置了 setCapture则也会捕获到mouseup

<!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
潜水修行。。。
等级:

发表于：2008-05-14 01:03:0016楼得分:150

这个和捕获有什么关系?
因为阻止了默认的事件,才会阻止默认的滚动事件..如果达到条件了,就不阻止默认事件就好了...
可以参考下面的例子.

JScript code

<!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;">&nbsp;</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>