1

我创建了一个可拖动对象，当对象从左到右（隐藏）然后从右到左（显示）拖动时，我可以隐藏和显示内容。该对象不能再往左或往右走（包含：“父”）。该事件在 mouseup 时触发。但是，只有当鼠标光标停留在对象上时，mouseup 才有效。如果在光标离开对象时触发 mouseup 事件，则不会触发。

即使光标离开了对象，有人可以帮我找到触发 mouseup 的方法吗？任何帮助将非常感激。这是一个演示： http: //www.madfrogdesigns.com/vault/mouseup/

这是我的jQuery代码：

$(document).ready(function(){
    initCheckBoxes();
});

var slideSpeed = 200;
var leftDist = 20;

function initCheckBoxes()
{
    $(".toggle-slider").draggable({containment: "parent"});
    $(".toggle-slider").mouseup(function(){

    //Toggle markers;
    $(".content").fadeToggle(200);

    var status = $(this).attr("toggle-status");

    switch(status)
        {
            case "0":
            $(this).animate({left: leftDist}, slideSpeed);
            $(this).attr("toggle-status", "1");
            break;

            case "1":
            $(this).animate({left: "0"}, slideSpeed);
            $(this).attr("toggle-status", "0");
            break;
        }
    });
}
4

1 回答 1

2

您需要两个单独的事件，因为如果 mouseup 发生在元素之外，它不会来自那里：

function initCheckBoxes()
{
    $(".toggle-slider").draggable({containment: "parent"});

    var slideMouseDown = false;

    $('.toggle-slider').mousedown(function() {
      slideMouseDown = true;
    });


    $(document).mouseup(function() {

      if(slideMouseDown == true)
      {
        //Toggle markers;
        $('.content').fadeToggle(200);

        var sliderToggle = $('.toggle-slider');
        var status = sliderToggle.attr('toggle-status');

        switch(status)
        {
          case "0":
          //its off, slide it by 20px;
          sliderToggle.animate({left: leftDist}, slideSpeed);
          //change status to 1
          sliderToggle.attr("toggle-status", "1");
          break;

          case "1":
          //its 'on', slide it to 0px;
          sliderToggle.animate({left: "0"}, slideSpeed);
          //change status to 0
          sliderToggle.attr("toggle-status", "0");
          break;
        }
      }

      slideMouseDown = false;
    });
}
于 2012-04-25T17:38:21.843 回答