Jquery停止事件的上下文菜單

Question

我正在做一個上下文菜單，但有一個問題，我的上下文菜單，當我右鍵單擊我希望上下文菜單停止的位置。我曾嘗試使用.stop()，但它不起作用。

這是JS Fiddle

JQUERY

$(".menu").hide(); 
$(document).on("contextmenu", ".element", function (e) { 

    $(".menu").fadeIn(); 
    return false; 
}); 

$(document).mouseup(function (e) { 
    $(".menu").fadeOut(300); 
}); 



$(document).bind('mousemove', function(e){ 
    $('.menu').css({ 
     left: e.pageX + 20, 
     top: e.pageY 
    }); 
    $(".menu").stop(); 
}); 

Answer 1

這裏有一個方法，你檢查菜單是可見的，如果它是不動它。

var $menu = $(".menu").hide(); 
    $(document).on("contextmenu", ".element", function (e) { 
     $menu.fadeIn(); 
     return false; 
    }); 

    $(document).mouseup(function (e) { 
     $menu.fadeOut(300); 
    }); 

    $(document).bind('mousemove', function (e) { 
     if ($menu.is(':visible')) { 
      return; 
     } 
     $menu.css({ 
      left: e.pageX + 20, 
      top: e.pageY 
     }); 

    }); 

DEMO

或者您可以使用contextmenu事件來設置菜單中的位置，而無需使用鼠標移動。

$(document).on("contextmenu", ".element", function (e) { 
     $menu.css({ 
      left: e.pageX + 20, 
      top: e.pageY 
     }).fadeIn(); 
     return false; 
    }); 

DEMO 2