Question

我创建了一个可拖动的对象，允许我在从左到右（隐藏）然后从右到左（显示）拖动对象时隐藏和显示内容。该对象不能比左或右更远（包含：“父”）。该事件在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;
        }
    });
}

Answer 1

你需要两个独立的事件，因为如果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;
    });
}

Jquery draggable - 当光标离开对象时，mouseup不会触发

1 个答案: