自制浏览器右键菜单

最新推荐文章于 2022-10-25 16:03:41 发布

熊猫教主

最新推荐文章于 2022-10-25 16:03:41 发布

阅读量556

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端常用效果

本文链接：https://blog.youkuaiyun.com/duronal/article/details/52450792

web前端常用效果专栏收录该内容

1 篇文章

订阅专栏

STEP1
拦截浏览器右键菜单事件

$(document).on("contextmenu", function() {
    /**/
    return false;
});

STEP2
获取鼠标位置，显示自定义菜单div

$(document).on ("contextmenu", function() {
    var e = event || window.event;
    $("#other_menu").css('margin-left', e.clientX+15).css('margin-top', e.clientY+15).fadeIn();
    return false;
});

STEP3
给自定义元素绑定不同的菜单

$("#element").on ("contextmenu", function() {
    var e = event || window.event;      
    $("#other_menu").css('margin-left', e.clientX+15).css('margin-top', e.clientY+15).fadeIn();
    return false;
});