上下文菜单的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