How to add a custom right-click menu to a webpage?

后端 未结 19 1534
广开言路
广开言路 2020-11-22 15:54

I want to add a custom right-click menu to my web application. Can this be done without using any pre-built libraries? If so, how to display a simple custom right-click menu

19条回答
  •  一个人的身影
    2020-11-22 16:31

    Try This

    $(function() {
    var doubleClicked = false;
    $(document).on("contextmenu", function (e) {
    if(doubleClicked == false) {
    e.preventDefault(); // To prevent the default context menu.
    var windowHeight = $(window).height()/2;
    var windowWidth = $(window).width()/2;
    if(e.clientY > windowHeight && e.clientX <= windowWidth) {
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY > windowHeight && e.clientX > windowWidth) {
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("top", "auto");
    } else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
      $("#contextMenuContainer").css("left", e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("right", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    } else {
      $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
      $("#contextMenuContainer").css("top", e.clientY);
      $("#contextMenuContainer").css("left", "auto");
      $("#contextMenuContainer").css("bottom", "auto");
    }
     $("#contextMenuContainer").fadeIn(500, FocusContextOut());
      doubleClicked = true;
    } else {
      e.preventDefault();
      doubleClicked = false;
      $("#contextMenuContainer").fadeOut(500);
    }
    });
    function FocusContextOut() {
     $(document).on("click", function () {
       doubleClicked = false; 
       $("#contextMenuContainer").fadeOut(500);
       $(document).off("click");           
     });
    }
    });
    

    http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/

提交回复
热议问题