如何获取浏览器默认值以及包装javascript / jquery中的自定义上下文菜单

问题描述

我有一个要求，我想在同一个包装器

中显示自定义contextmenu和浏览器默认contextmenu

注意：我不想更改项目的包装或html结构

我有一个要在其中显示默认浏览器上下文菜单

的列表

  var myDefaultContexmenuList = ['defaultcm1','defaultcm2'];

以上列表可能会增加

以下是可更好查看的codepen： https://codepen.io/eabangalore/pen/xxVzomB

这是我所拥有的：

$(document).on("contextmenu","#contemenuwrapper",function (event) {
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
     $(".custom-contextmenuaction").css({ "left": x,"top": y});
     $(".custom-contextmenuaction").show();
}).bind("click",function (event) {
    $(".custom-contextmenuaction").hide();
});

var myDefaultContexmenuList = ['defaultcm1','defaultcm2'];

//how to override i don't kNow

#contemenuwrapper{
/*     height: 600px; */
    background:#ddd;
   padding:3px;
}

.default,.custom{
   padding:0;
   margin:0;
      text-align: center;
    line-height: 184px;
    color: #ffff;
    font-size: 44px;
    font-weight: 100;
}

.default{
    height:180px;
    background:orange;
}

.custom{
  height: 180px;
  background:orangered;
}

.custom-contextmenuaction{
   width: 120px;
   height:40px;
   background:#000;
   color:#fff;
   text-align: center;
   line-height: 6px;
  position:absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Default and custom contextmenu<h4/>


<div id="contemenuwrapper">
    <div class="custom">
        <p>my custom contextmenu</p>
    </div>
    <div class="default" id="defaultcm1">
       <p>browser default contexmenu</p>
    </div>
    <div class="custom">
         <p>my custom contextmenu</p>
    </div>
     <div class="default" id="defaultcm2">
       <p>browser default contextmenu</p>
    </div>
</div>
  
  
 <div class="custom-contextmenuaction" style="display:none;">
   <p>custom menu</p>
 </div>

请事先帮助我！！

解决方法

调用event.preventDefault后，当然不会显示本机上下文菜单。

如果您只对首先要实际定位的元素的事件做出反应，则可以在此处以非常简单的方式解决此问题。

替换

$(document).on("contextmenu","#contemenuwrapper",function (event) {

使用

$(document).on("contextmenu","#contemenuwrapper .custom",function (event) {