javascript - 如何将右键单击上下文菜单绑定(bind)到右键单击 jQuery

Question

当人们右键单击正文时，我正在尝试创建一个自定义上下文菜单。我不确定如何将菜单绑定(bind)到右键单击事件，也不确定如何设置上下文菜单。我的第一个问题是如何将菜单绑定(bind)到右键单击事件。第二个问题是寻找菜单的一些文档。非常感谢。

我的代码:

$(document).ready(function() {
  // right click event
  $("body")
    .mouseup(function(e) {
      if (e.button == 2) {
        $(this).append("<span style='color:#f00;'>Mouse up.</span>");
        return false;
      }
      return true;
    })
    .mousedown(function(e) {
      if (e.button == 2) {
        rightClickMenu();
        return false;
      }
      return true;
    });
  $("body").append("<div id='div1'></div>");

  function rightClickMenu() {
    contextMenu({},
      items: {
        "edit": {
          name: "Edit",
          icon: "edit"
        },
        "cut": {
          name: "Cut",
          icon: "cut"
        },
        "copy": {
          name: "Copy",
          icon: "copy"
        },
        "paste": {
          name: "Paste",
          icon: "paste"
        },
        "delete": {
          name: "Delete",
          icon: "delete"
        }
      });
  }
}); // end ready

#div1 {
  background-color: lightgreen;
  height: 100px;
  width: 100px;
  left: 500px;
  top: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="div1">
</div>

Answer 1

几个月前我做了一个非常复杂的解决方案，但只是一个简短的片段来展示我如何通过右键单击获得 Prop 后解决它。首先，我使用 event.special 制作了自己的事件

$.event.special.clickContextMenu = {
    bindType: 'mouseup',
    delegateType: 'mouseup',
    handle: function (event) {
        var $this = $(this);
        var args = arguments;
        event.stopPropagation();
        event.preventDefault();
        if (event.which === 3) {
            $(event.target).contextmenu( function() {
                if ($('#ufdContextMenu').length > 0) {
                    return false;
                } else {
                    $(event.target).ufdContextMenu({'top':event.pageY, 'left':event.pageX});
                    return false;
                }
            });
        }
    }
}

当我初始化必须获得上下文菜单的元素时，我做了如下操作:

$(this).BuildContextMenu({'status':status, 'number':obj1.Number});
$(this).on( "clickContextMenu", function(){} );

这里是构建菜单的插件:

$.fn.BuildContextMenu = function (method) {
var args = arguments;
var $this = $(this);
return this.each(function () {
        if ($.fn.BuildContextMenu.methods[method]) {
            return $.fn.BuildContextMenu.methods[method].apply(this, Array.prototype.slice.call(args, 1));
        } else if (typeof method === 'object' || !method) {
            if ($this.data('BuildContextMenu')) {
                var opts = $.extend({}, $this.data('BuildContextMenu'), method);
            } else {
                var opts = $.extend({}, $.fn.BuildContextMenu.defaults, method, $this.data());
            }
        } else {
            $.error('Method "' + method + '" does not exist');
        }
        if (!$this.data('BuildContextMenu')){
            $this.data('BuildContextMenu', {})
        };
        if (opts) $.extend($this.data('BuildContextMenu'), opts);

        $this.BuildContextMenu('buildMenu');
    });
}

$.fn.BuildContextMenu.defaults = {
    status: null,
    number: null
}

$.fn.BuildContextMenu.methods = {
    buildMenu: function () {
        var $this = $(this);
        var opts =  $this.data('BuildContextMenu');
        var menu = $('<ul class="contextMenu"></ul>');
        if (opts.status.contextMenu != undefined) {
            $.each(opts.status.contextMenu, function (key, value) {
                console.log(value);
                if (value=='transfer') {

                    var item = $('<li><i class="icon i_cm_transfer">'+content0+'</i></li>').on('click', function () {
                        console.log(content0);
                    }).appendTo(menu);

                } else if (value=='call'){
                    var item = $('<li><i class="icon i_cm_call">'+content1+'</i></li>').on('click', function () {
                         $console.log(content1);
                    }).appendTo(menu)

                } else if (value=='request Transfer'){
                    var item = $('<li><i class="icon i_cm_requestTransfer">'+content2+'</i></li>').on('click', function () {
                        $console.log(content2);
                    }).appendTo(menu)

                } else if (value=='chat'){
                    var item = $('<li><i class="icon i_cm_chat">'+content3+'</i></li>').on('click', function () {
                        $console.log(content3);
                    }).appendTo(menu)

                } else if (value=='abort'){
                    var item = $('<li><i class="icon i_cm_abort">'+content4+'</i></li>').on('click', function () {
                        console.log(content4);
                    }).appendTo(menu)

                } else if (value=='pickup'){
                    var item = $('<li><i class="icon i_cm_pickup">'+$content5+'</i></li>').on('click', function () {
                        console.log(content5);
                    }).appendTo(menu)

                }               
            });
        }

        $(this).data('menu', menu);

    }
}

这里是显示上下文菜单的插件:

$.fn.ufdContextMenu = function (method) {

    var args = arguments;
    var $this = $(this);
    return this.each(function () {
        if ($.fn.ufdContextMenu.methods[method]) {
            return $.fn.ufdContextMenu.methods[method].apply(this, Array.prototype.slice.call(args, 1));
        } else if (typeof method === 'object' || !method) {
            if ($this.data('ufdContextMenu')) {
                var opts = $.extend({}, $this.data('ufdContextMenu'), method);
            } else {
                var opts = $.extend({}, $.fn.ufdContextMenu.defaults, method, $this.data());
            }
        } else {
            $.error('Method "' + method + '" does not exist');
        }
        if (!$this.data('ufdContextMenu')){
            $this.data('ufdContextMenu', {})
        };
        if (opts) $.extend($this.data('ufdContextMenu'), opts);

        $this.ufdContextMenu('showMenu');
    });
};  

$.fn.ufdContextMenu.defaults = {
    menuID: 'ufdContextMenu',
    timer: 2000,
    appendTo: $(document.body),
    top: 0,
    left: 0
}

$.fn.ufdContextMenu.methods = {
    destroy: function () {
        var $this = $(this);
        var opts =  $this.data('ufdContextMenu');
        var doc = $(document.body);
        var menu = $(document.body).find('#'+opts.menuID);
        menu.off();
        menu.remove();

    },
    showMenu: function () {
        var $this = $(this);
        var opts =  $this.data('ufdContextMenu');
        var menu = $this.data('menu');
        var doc = $(document.body);

        var timeout = setTimeout(function (){
             $this.ufdContextMenu('destroy');
        }, opts.timer);

        if (menu == undefined) {
            $.error("this element don't have a context menu to show!");
            return false;
        }

        menu.attr('id', opts.menuID);   

        menu.css({
            'position': 'absolute',
            'z-index': '9999',
            'top': opts.top + 'px',
            'left': opts.left + 'px'
        });     

        menu.on("mouseleave", function(e) {
            timeout = setTimeout(function (){
                $this.ufdContextMenu('destroy');
            }, opts.timer);
        });

        menu.on("mouseenter", function(e) {
            if (timeout != null) {
                clearTimeout(timeout);
                timeout = null;
            }
        });

        doc.append(menu);       
    }
}

希望这对您有帮助。