JAVASCRIPT-网页自定义右键菜单

最新推荐文章于 2024-09-05 08:59:33 发布

艾斯卡诺

最新推荐文章于 2024-09-05 08:59:33 发布

阅读量225

点赞数

分类专栏：其他

原文链接：https://www.it566.top/index.php/wenzhang/javascript/2021/03/25/78255/

版权

JavaScript jQuery 右键菜单自定义上下文菜单用户交互

关键词由CSDN通过智能技术生成

其他专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有一些网站，当你右键点击时，它们有定制的下拉菜单，覆盖了浏览器的行为下拉菜单，这是怎么做到的？

新建堆栈段：

// JAVASCRIPT (jQuery)

// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    
    // Avoid the real one
    event.preventDefault();
    
    // Show contextmenu
    $(".custom-menu").finish().toggle(100).
    
    // In the right position (the mouse)
    css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
});


// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
    
    // If the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length > 0) {
        
        // Hide it
        $(".custom-menu").hide(100);
    }
});


// If the menu element is clicked
$(".custom-menu li").click(function(){
    
    // This is the triggered action name
    switch($(this).attr("data-action")) {
        
        // A case for each action. Your actions here
        case "first": alert("first"); break;
        case "second": alert("second"); break;
        case "third": alert("third"); break;
    }
  
    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
  });

/* CSS3 */

/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
}

.custom-menu li:hover {
    background-color: #DEF;
}