javascript - 上下文菜单的 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 事件来设置菜单位置，而无需使用 mousemove。

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

DEMO 2