求助一个关于mousedown和mouseup事件响应的问题

该元素mousedown的是应该给document或者body绑定mousemove事件，mouseup也应该绑定在document或者body上

解决方案 »

  1.   

    mousedown是指鼠标左键按下的事件
    放在document或者body下面会有问题吧
      

  2.   

    试过了 mouseleave事件是指鼠标移开该控件时触发.. 和我的概念不一样
      

  3.   

    $("#pulley").mousedown(function () {
        //此处绑定document
        $(document).bind("mousemove", function (e) {
            $("#debug").text("start");
            setschdule(e);
        });
    });
    $(document).mouseup(function () {
        //同上
        $(document).unbind("mousemove");
        $("#debug").text("test");
    });我的意思是这样，mousemove不绑在页面里万一手抖移出元素外事件不就停了
      

  4.   


    $("#pulley").mousedown(function(){
    $(document).bind("mousemove", function(e){
    $("#debug").text("start");
    setschdule(e);
    });
    });
    $(document).mouseup(function(){
    $("#pulley").unbind("mousemove");
    $("#debug").text("close");
    });
    试过了  好像不可以 后面document解绑不了事件 然后滑块就停不下来了
      

  5.   

    解绑应该是$(document).unbind("mousemove");原生的拖动 你可能考虑些这样的代码oDiv2.onmousedown = function(ev){
    var ev = ev || window.event;
    disY = ev.clientY - oDiv2.offsetTop;

    document.onmousemove = function(ev){
    var ev = ev || window.event;

    var T = ev.clientY - disY;

    scrollBar(T);

    };
    document.onmouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
    };
    return false;
    };
      

  6.   

    看到
    $("*").mouseup(function(){
                $("#pulley").unbind("mousemove");
                $("#debug").text("test");
            });
    可以想象到你代码何其壮观。
      

  7.   

    不要自己写了，用jQuery现成的插件吧http://api.jqueryui.com/draggable/如果你有兴趣可以看看下面的原生JS写的代码<!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=utf-8" />
    <title>drag</title>
    </head>
    <body>
    <script type="text/javascript">
    (function(w) {
    var drag = function(op) {
    this.hander = op.hander || null;
    this.target = op.target || op.hander || null;
    this.start = op.start || null;
    this.move = op.move || null;
    this.end = op.end || null;
    this.pos = null;
    this.draging = false;
    if(this.hander) {
    addEvent(this.hander, 'mousedown', bind(this, this.dragStart));
    addEvent(document, 'mousemove', bind(this, this.dragMove));
    addEvent(document, 'mouseup', bind(this, this.dragEnd));
    }
    }
    drag.prototype = {
    dragStart: function(e) {
    this.start && this.start.call(this, e);
    this.pos = [e.pageX - parseInt(this.target.style.left), e.pageY - parseInt(this.target.style.top)];
    this.draging = true;
    e.stop();
    },
    dragMove: function(e) {
    if(this.draging) {
    this.target.style.left = e.pageX - this.pos[0] + 'px';
    this.target.style.top = e.pageY - this.pos[1] + 'px';
    this.move && this.move.call(this, e);
    }
    },
    dragEnd: function(e) {
    this.draging = false;
    this.pos = null;
    this.end && this.end.call(this, e);
    }
    };

    function bind(o, fn) {
    return function(e) {
    var ev = e || window.event;
    ev.pageX = e.pageX || ev.clientX;
    ev.pageY = e.pageY || ev.clientY;
    ev.stop = e.preventDefault? function() {
    e.preventDefault();
    e.stopPropagation();
    } : function() {
    ev.cancelBubble = true;
    ev.returnValue = false;
    }
    fn.call(o, e);
    }
    }
    function addEvent(dom, type, fn) {
    if(document.addEventListener) {
    dom.addEventListener(type, fn, false);
    } else if(document.attachEvent) {
    dom.attachEvent('on' + type, fn);
    } else {
    dom['on' + type] = fn;
    }
    }
    function removeEvent(dom, type, fn) {
    if(document.removeEventListener) {
    dom.removeEventListener(type, fn, false);
    } else if(document.detachEvent) {
    dom.detachEvent('on' + type, fn);
    } else {
    dom['on' + type] = null;
    }
    }

    w.drag = drag;
    })(window);
    </script>
    <div id="box" style="width:400px;height:200px;background:#f0f;"></div>
    <script type="text/javascript">
    new drag({
    hander: document.getElementById('box'),
    start: function(e) {
    var s = document.getElementById('test');
    if(!s) {
    s = document.createElement('div');
    s.id = 'test';
    s.style.position = 'absolute';
    s.style.width = '200px';
    s.style.height = '200px';
    s.style.backgroundColor = '#f00';
    document.body.appendChild(s);
    this.target = s;
    } else {
    s.style.display = 'block';
    }
    s.style.left = e.pageX + 'px';
    s.style.top = e.pageY + 'px'; 
    },
    end: function(e) {
    this.target.style.display = 'none';
    }
    });
    </script>
    </body>
    </html>