jQueryを右クリックすると右クリックのコンテキストメニューをバインドする方法

Question

人が右クリックしたときにカスタムコンテキストメニューを作成しようとしています。私はどのように右クリックイベントにメニューをバインドし、どのようにコンテキストメニューを設定するか分からない。私の最初の質問は、メニューを右クリックイベントにバインドする方法です。 2番目の質問は、メニューのドキュメントを探しています。大変ありがとうございます。

マイコード：

$(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

私は数ヶ月前に、非常に複雑なソリューションをしたが、ちょうど速いスニペットは、私は右クリックで小道具を取得した後、それを解決した方法を示すこと。

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

、ここでプラグインに：すべての まず私はこのような何かをしたコンテキストメニューを取得する必要があり、私の要素を初期化すると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; 
       } 
      }); 
     } 
    } 
} 

を使用して独自のイベントを作りました

012：コンテキスト・メニューを表示するためにここで

$.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); 

    } 
} 

プラグイン：メニューを構築

これは多くの役に立っています。