如何解决如何获取浏览器默认值以及包装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) {
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。