这个下拉效果一直很困惑.求解

为什么我加了add(e).preventDefault();还是会有默认的事件呢?
另外..
var slider = $("slider").offsetHeight - $("slider_btn").offsetHeight;
var list = $("box").offsetHeight - $("list").offsetHeight;
var result = list / slider;//这里为什么要除以?
我的数学好差啊
<!doctype HTML>
<html>
<head>
<title>scroll</title>
<style type="text/css">
#box{width:400px;height:143px;overflow:hidden;position:relative;float:left}
ul{position:absolute;left:0;top:0;margin:0px}
#slider{width:10px;height:143px;background:#ccc;float:left;position:relative}
#slider_btn{position:absolute;top:0;left:0;height:30px;width:10px;background:orange}
</style> </head>
<body>
<div>dsfdsfdsf</div> <div id="box">
<ul class="list" id="list">
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
<li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
</ul>
</div>
<div id="slider">
<div id="slider_btn">
</div>
</div> <script type="text/javascript">
var $ = function(id){return document.getElementById(id)};
var slider = $("slider").offsetHeight - $("slider_btn").offsetHeight;
var list = $("box").offsetHeight - $("list").offsetHeight;
var result = list / slider;
function add(e){
return e||window.event;
}
$("slider_btn").onmousedown = function(e){
var posY = add(e).clientY - this.offsetTop;
document.onmousemove = function(e){
var y = add(e).clientY - posY;
add(e).preventDefault();
if(y<0){
$("slider_btn").style.top = "0px";
}
else if(y > slider){
$("slider_btn").style.top = slider +"px";
}
else{
$("slider_btn").style.top = y +"px";
$("list").style.top = (result*y)+"px"
}
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>

解决方案 »

  1.   

    阻止document的事件冒泡还有意义？
      

  2.   

     add(e).preventDefault();  这个是阻止冒泡的?
      

  3.   


    <!doctype HTML>
    <html>
        <head>
    <title>scroll</title>
            <style type="text/css">
                #box{width:400px;height:143px;overflow:hidden;position:relative;float:left}
                ul{position:absolute;left:0;top:0;margin:0px}
                #slider{width:10px;height:143px;background:#ccc;float:left;position:relative}
                #slider_btn{position:absolute;top:0;left:0;height:30px;width:10px;background:orange}
            </style>    </head>
        <body>
            <div>dsfdsfdsf</div>    <div id="box">
            <ul class="list" id="list">
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li>
            <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li>
            </ul>
        </div>
        <div id="slider">
            <div id="slider_btn">
            </div>
        </div>        <script type="text/javascript">
                var $ = function(id){return document.getElementById(id)};
                var slider = $("slider").offsetHeight - $("slider_btn").offsetHeight;
                var list = $("box").offsetHeight - $("list").offsetHeight;
                var result = list / slider;
                function add(e){
                    return e||window.event;
                }
                $("slider_btn").onmousedown = function(e){
                    var posY = add(e).clientY - this.offsetTop;
    if(add(e).preventDefault) add(e).preventDefault();
                    document.onmousemove = function(e){
                        var y = add(e).clientY - posY;
                        if(y<0){
                            $("slider_btn").style.top = "0px";
                        }
                        else if(y > slider){
                            $("slider_btn").style.top = slider +"px";
                        }
                        else{
                            $("slider_btn").style.top = y +"px";
                            $("list").style.top = (result*y)+"px"
                        }
                        return false;
                    }
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            </script>
        </body>
    </html>
      

  4.   

    var result = list / slider;  这里为什么要这样计算 啊?
      

  5.   

    result 是 按钮可移动距离和内容可移动距离的比例值，就是按钮移动一个单位，内容则移动多少
      

  6.   

    add(e).preventDefault ? add(e).preventDefault():add(e).returnValue=false;