Làm cách nào để thêm menu chuột phải tùy chỉnh vào trang web?

291

Tôi muốn thêm một menu chuột phải tùy chỉnh vào ứng dụng web của mình. Điều này có thể được thực hiện mà không cần sử dụng bất kỳ thư viện được xây dựng trước? Nếu vậy, làm thế nào để hiển thị một menu chuột phải tùy chỉnh đơn giản không sử dụng thư viện JavaScript của bên thứ 3?

Tôi đang nhắm đến một cái gì đó giống như những gì Google Docs làm. Nó cho phép người dùng nhấp chuột phải và hiển thị cho người dùng menu riêng của họ.

LƯU Ý: Tôi muốn tìm hiểu cách tự tạo so với sử dụng thứ gì đó đã được tạo ra bởi hầu hết thời gian, các thư viện bên thứ 3 này chứa đầy các tính năng trong khi tôi chỉ muốn các tính năng mà tôi cần vì vậy tôi muốn nó hoàn toàn được làm bằng tay tôi.

javascript  contextmenu  right-click 
— người dùng đã đăng ký
nguồn
3
chỉ vấp ngã: davidwalsh.name/html5-context-menu yêu HTML5
— TD_Nijboer
2
Đây chắc chắn không phải là một bản sao. Vì câu hỏi yêu cầu câu trả lời mà không có thư viện của bên thứ 3 và người khác có thể sử dụng Jquery (tôi muốn viết một ổ đĩa ngữ cảnh giống như trình đơn ngữ cảnh bên trong một bản mô tả người dùng) .
— dùng2284570
chỉ hôm nay tôi đã tìm thấy thêm hai ví dụ hay (tôi nghĩ) về điều này: DEMO 1 // DEMO 2 (bản demo này cần giao diện người dùng jquery ) Tôi hy vọng sẽ giúp được cho bất kỳ ai, bb.
— Drako
2
Chỉ muốn chỉ ra rằng menu ngữ cảnh HTML5 chỉ được hỗ trợ trong một số phiên bản Firefox và theo như tôi có thể nói không có gì khác hỗ trợ nó. Chrome kể từ phiên bản 61 không hỗ trợ nó.
— Dan Willett
2
Đối với những người sử dụng React - trình đơn gốc sao chép tất cả các chức năng hiện có (sao chép, mở trong tab mới, tìm kiếm trên google, v.v.) trong khi tìm kiếm bản địa (áp dụng các kiểu khác nhau tùy thuộc vào trình duyệt). bản demo
— samdd 15/03/18

Câu trả lời:

247

Trả lời câu hỏi của bạn - sử dụng contextmenusự kiện, như dưới đây:

if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    alert("You've tried to open context menu"); //here you draw your own menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}
<body>
  Lorem ipsum...
</body>
Mở rộng đoạn trích

Nhưng bạn nên tự hỏi mình, bạn có thực sự muốn ghi đè hành vi nhấp chuột phải mặc định - điều này phụ thuộc vào ứng dụng mà bạn đang phát triển.

NHANH CHÓNG

— Radek Benkel
nguồn
12
Đã thử nghiệm trên Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (cả 4 thông qua addEventListener) và IE 8 (Đính kèm).
— Radek Benkel
54
Bạn vừa giải thích cách vô hiệu hóa menu chuột phải. Làm thế nào để tạo menu riêng của chúng tôi ??
— Shashwat
13
@Shashwat Bạn biết địa điểm, nơi người dùng đã nhấp và bạn không có menu gốc. Tạo một thùng chứa ở nơi đó và hiển thị menu của bạn ở đó.
— Radek Benkel
2
Điều đó đúng: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Tài liệu cũng là một yếu tố.
— Radek Benkel
4
@shanehoban Khi bạn nhìn vào mã, bạn sẽ thấy dòng này e.preventDefault();. Đây là lý do tại sao menu thông thường không được hiển thị. Những gì bạn có thể làm là tạo ra một số logic có điều kiện để kiểm tra, nếu phím được nhấn trong khi nhấp chuột phải và sau đó KHÔNG gọi e.preventDefault()- bạn sẽ nhận được menu trình duyệt thông thường sau đó.
— Radek Benkel
54

Rất hữu ích cho tôi. Vì lợi ích của những người như tôi, mong đợi bản vẽ của menu, tôi đặt ở đây mã tôi đã sử dụng để tạo menu chuột phải:

$(document).ready(function() {


  if ($("#test").addEventListener) {
    $("#test").addEventListener('contextmenu', function(e) {
      alert("You've tried to open context menu"); //here you draw your own menu
      e.preventDefault();
    }, false);
  } else {

    //document.getElementById("test").attachEvent('oncontextmenu', function() {
    //$(".test").bind('contextmenu', function() {
    $('body').on('contextmenu', 'a.test', function() {


      //alert("contextmenu"+event);
      document.getElementById("rmenu").className = "show";
      document.getElementById("rmenu").style.top = mouseY(event) + 'px';
      document.getElementById("rmenu").style.left = mouseX(event) + 'px';

      window.event.returnValue = false;


    });
  }

});

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});



function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}
.show {
  z-index: 1000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid blue;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}
<!-- jQuery should be at least version 1.7 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="contextmenu.js"></script>
<link rel="stylesheet" href="contextmenu.css" />


<div id="test1">
  <a href="www.google.com" class="test">Google</a>
  <a href="www.google.com" class="test">Link 2</a>
  <a href="www.google.com" class="test">Link 3</a>
  <a href="www.google.com" class="test">Link 4</a>
</div>

<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
  <ul>
    <li>
      <a href="http://www.google.com">Google</a>
    </li>

    <li>
      <a href="http://localhost:8080/login">Localhost</a>
    </li>

    <li>
      <a href="C:\">C</a>
    </li>
  </ul>
</div>
Mở rộng đoạn trích

— Mohamed Iqzas
nguồn
7
@Schism hậu tố mouseY(event)và mouseX(event)với pxđể làm cho nó làm việc như mong đợi: http://jsfiddle.net/a6w7n64o/ .
— zanetu
3
Bạn đang tham chiếu một phần tử theo id của testnhưng không có phần tử nào theo id của test. Chỉ các yếu tố với lớp test.
— Công tước xứ Marshall
1
@Adel chế tạo - Bất kỳ thứ gì không phải bản địa và không do chính bạn tạo ra đều là bên thứ ba. jQuerythực sự không phải là tất cả những gì đầy ắp với những thứ thêm. Không đến mức nó sẽ làm chậm bất cứ điều gì. Nó rất hữu ích và tương tự jQueryđược sử dụng trong câu trả lời này có thể dễ dàng được chuyển đổi thành các JavaScriptlệnh tiêu chuẩn . Nó có thể không phải là 100% nội tuyến với yêu cầu trong câu hỏi ban đầu, nhưng nó chắc chắn là 95% nội tuyến với nó.
— Công tước Marshall
6
Trong firefox 39, bối cảnh mặc định vẫn hiển thị trên đầu menu tùy chỉnh. Ngoài ra menu tùy chỉnh bỏ qua ngay lập tức sau khi hiển thị.
— Matt
1
@Matt Tôi gặp vấn đề tương tự với Firefox 58. Bài đăng này mô tả một giải pháp phù hợp với tôi: stackoverflow.com/a/40545465/2922675 Bạn tắt tính năng truyền sự kiện cho tài liệu và đăng ký trình xử lý trình đơn ngữ cảnh của bạn trên đối tượng cửa sổ . Đây là một fiddle điều chỉnh: jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

Một sự kết hợp của một số CSS đẹp và một số thẻ html không chuẩn không có thư viện bên ngoài có thể cho kết quả tốt (JSFiddle)

HTML

<menu id="ctxMenu">
    <menu title="File">
        <menu title="Save"></menu>
        <menu title="Save As"></menu>
        <menu title="Open"></menu>
    </menu>
    <menu title="Edit">
        <menu title="Cut"></menu>
        <menu title="Copy"></menu>
        <menu title="Paste"></menu>
    </menu>
</menu>

Lưu ý: thẻ menu không tồn tại, tôi đang tạo nó (bạn có thể sử dụng bất cứ thứ gì)

CSS

#ctxMenu{
    display:none;
    z-index:100;
}
menu {
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    height:20px;
    width:20px;
    padding:0;
    margin:0;
    border:1px solid;
    background-color:white;
    font-weight:normal;
    white-space:nowrap;
}
menu:hover{
    background-color:#eef;
    font-weight:bold;
}
menu:hover > menu{
    display:block;
}
menu > menu{
    display:none;
    position:relative;
    top:-20px;
    left:100%;
    width:55px;
}
menu[title]:before{
    content:attr(title);
}
menu:not([title]):before{
    content:"\2630";
}

Các hoạt Javascript chỉ là ví dụ này, cá nhân tôi loại bỏ nó cho các menu dai dẳng trên cửa sổ

var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
    event.preventDefault();
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "block";
    ctxMenu.style.left = (event.pageX - 10)+"px";
    ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "";
    ctxMenu.style.left = "";
    ctxMenu.style.top = "";
},false);

Cũng lưu ý, bạn có khả năng có thể sửa đổi menu > menu{left:100%;}thành menu > menu{right:100%;}một menu mở rộng từ phải sang trái. Bạn sẽ cần phải thêm một lề hoặc một cái gì đó ở đâu đó

— Isaac
nguồn
20

Theo các câu trả lời ở đây và trên các luồng khác, tôi đã tạo một phiên bản giống như một trong Google Chrome, với chuyển đổi css3. JS Fiddle

Hãy bắt đầu háo hức, vì chúng tôi có js ở trên trang này, chúng tôi có thể lo lắng về css và bố cục. Bố cục mà chúng ta sẽ sử dụng là một <a>phần tử có thành <img>phần hoặc biểu tượng tuyệt vời về phông chữ ( <i class="fa fa-flag"></i>) và <span>để hiển thị các phím tắt. Vì vậy, đây là cấu trúc:

<a href="#" onclick="doSomething()">
  <img src="path/to/image.gif" />
  This is a menu option
  <span>Ctrl + K</span>
</a>

Chúng tôi sẽ đặt những thứ này trong một div và hiển thị div đó khi nhấp chuột phải. Hãy tạo kiểu cho chúng giống như trong Google Chrome, phải không?

#menu a {
  display: block;
  color: #555;
  text-decoration: no[...]

Bây giờ chúng tôi sẽ thêm mã từ câu trả lời được chấp nhận và nhận giá trị X và Y của con trỏ. Để làm điều này, chúng tôi sẽ sử dụng e.clientXvà e.clientY. Chúng tôi đang sử dụng máy khách, vì vậy div menu phải được sửa.

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.client[...]

Và đó là nó! Chỉ cần thêm các giao diện css để mờ dần trong và ngoài, và thực hiện!

Hiển thị đoạn mã

— Stephan Stanisic
nguồn
Điều này đã cứu tôi một cơn đau đầu rất lớn! Nếu OP đang tìm kiếm một cách đơn giản để sử dụng trên toàn bộ trang web và không chỉ là div, thì câu trả lời này nên được chấp nhận :)
— Woody
12

Bạn có thể thử đơn giản là chặn menu ngữ cảnh bằng cách thêm dòng sau vào thẻ body:

<body oncontextmenu="return false;">

Điều này sẽ chặn tất cả quyền truy cập vào menu ngữ cảnh (không chỉ từ nút chuột phải mà cả bàn phím).

PS bạn có thể thêm nó vào bất kỳ thẻ nào bạn muốn tắt menu ngữ cảnh trên

ví dụ:

<div class="mydiv" oncontextmenu="return false;">

Sẽ chỉ vô hiệu hóa menu ngữ cảnh trong div cụ thể đó

— đến 0
nguồn
10 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>

<title>Context menu - LabLogic.net</title>

</head>
<body>

<script language="javascript" type="text/javascript">

document.oncontextmenu=RightMouseDown;
document.onmousedown = mouseDown; 



function mouseDown(e) {
    if (e.which==3) {//righClick
        alert("Right-click menu goes here");
    }
}


function RightMouseDown() { return false; }

</script>

</body>
</html>

Đã thử nghiệm và hoạt động trong Opera 11.6, firefox 9.01, Internet Explorer 9 và chrome 17 Bạn có thể kiểm tra một mẫu làm việc tại menu nhấp chuột phải

— Phòng thí nghiệm
nguồn
Nó hoạt động, nhưng menu demo trên trang của bạn thực sự rất nhỏ và chật chội. Ví dụ tốt, mặc dù.
— David Millar
2
Nó hoạt động nếu bạn đang sử dụng chuột ba nút. Ctrl-click để lại cho người dùng cao và khô. @Singles có một gợi ý tốt hơn, ngay cả khi nó để lại một chút cho trí tưởng tượng.
— AJFarkas
7

Tôi biết điều này đã được trả lời, nhưng tôi đã dành một chút thời gian để vật lộn với câu trả lời thứ hai để làm cho menu ngữ cảnh gốc biến mất và nó hiển thị ở nơi người dùng nhấp vào.
HTML

<body>
    <div id="test1">
        <a href="www.google.com" class="test">Google</a>
        <a href="www.google.com" class="test">Link 2</a>
        <a href="www.google.com" class="test">Link 3</a>
        <a href="www.google.com" class="test">Link 4</a>
    </div>

    <!-- initially hidden right-click menu -->
    <div class="hide" id="rmenu">
        <ul>
            <li class="White">White</li>
            <li>Green</li>
            <li>Yellow</li>
            <li>Orange</li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </div>
</body>

CSS

.hide {
  display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
}

#rmenu ul {
  padding: 0;
  list-style: none;
}
#rmenu li
{
  list-style: none;
  padding-left: 5px;
  padding-right: 5px;
}

JavaScript

if (document.getElementById('test1').addEventListener) {
    document.getElementById('test1').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

Ví dụ CodePen

— Kristen Nielsen
nguồn
6

Thử cái này

$(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/

— AkshayBandivadekar
nguồn
Mã rất tuyệt, nhưng vui lòng bao gồm một số mô tả về vấn đề OP thực sự là gì và cách giải quyết vấn đề này.
— Rory McCrossan
Tôi thích giải pháp này, tuy nhiên trong firefox 39, menu sẽ tự tắt ngay sau khi nó xuất hiện.
— Matt
Giải pháp này không thực sự hoạt động nếu bạn buộc trang phải có một cuộn (giả sử bạn thêm một loạt các thẻ <br>) và ở đâu đó trong phần dưới cùng của nó.
— DanielM
Bạn nên sử dụng clientX và clientY thay vì pageX và pageY để làm việc này; kiểm tra câu trả lời tuyệt vời này: stackoverflow.com/questions/9262741/ từ
— DanielM
Có, DanielM có vấn đề với menu chuột phải trong khi cuộn để khắc phục bằng cách sử dụng clientX và clientY thay vì pageX và pageY, tôi đã thực hiện thay đổi mã. Cảm ơn vì đã giúp đỡ ...
— AkshayBandivadekar 7/8/2015
5

Giải pháp thuần túy và css cho trình đơn ngữ cảnh nhấp chuột phải thực sự năng động, mặc dù dựa trên các quy ước đặt tên được xác định trước cho các thành phần id, liên kết, v.v. jsfiddle và mã bạn có thể sao chép dán vào một trang html tĩnh:

<html>

<head>
  <style>
    .cls-context-menu-link {
      display: block;
      padding: 20px;
      background: #ECECEC;
    }
    
    .cls-context-menu {
      position: absolute;
      display: none;
    }
    
    .cls-context-menu ul,
    #context-menu li {
      list-style: none;
      margin: 0;
      padding: 0;
      background: white;
    }
    
    .cls-context-menu {
      border: solid 1px #CCC;
    }
    
    .cls-context-menu li {
      border-bottom: solid 1px #CCC;
    }
    
    .cls-context-menu li:last-child {
      border: none;
    }
    
    .cls-context-menu li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: blue;
    }
    
    .cls-context-menu li a:hover {
      background: blue;
      color: #FFF;
    }
  </style>
</head>

<body>

  <!-- those are the links which should present the dynamic context menu -->
  <a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
  <a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>

  <!-- this is the context menu -->
  <!-- note the string to=0 where the 0 is the digit to be replaced -->
  <div id="div-context-menu" class="cls-context-menu">
    <ul>
      <li><a href="#to=0">link-to=0 -item-1 </a></li>
      <li><a href="#to=0">link-to=0 -item-2 </a></li>
      <li><a href="#to=0">link-to=0 -item-3 </a></li>
    </ul>
  </div>

  <script>
    var rgtClickContextMenu = document.getElementById('div-context-menu');

    /** close the right click context menu on click anywhere else in the page*/
    document.onclick = function(e) {
      rgtClickContextMenu.style.display = 'none';
    }

    /**
     present the right click context menu ONLY for the elements having the right class
     by replacing the 0 or any digit after the "to-" string with the element id , which
     triggered the event
    */
    document.oncontextmenu = function(e) {
      //alert(e.target.id)
      var elmnt = e.target
      if (elmnt.className.startsWith("cls-context-menu")) {
        e.preventDefault();
        var eid = elmnt.id.replace(/link-/, "")
        rgtClickContextMenu.style.left = e.pageX + 'px'
        rgtClickContextMenu.style.top = e.pageY + 'px'
        rgtClickContextMenu.style.display = 'block'
        var toRepl = "to=" + eid.toString()
        rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g, toRepl)
        //alert(rgtClickContextMenu.innerHTML.toString())
      }
    }
  </script>
</body>

</html>
Mở rộng đoạn trích

— Yordan Georgiev
nguồn
Đây là câu trả lời nhiều hơn tôi mong đợi, một ví dụ thực sự sửa đổi menu chuột phải
— Jesse Reza Khorasanee
yup, một ví dụ tương tự có thể là: codepen.io/yordangeorgiev/pen/GzWJzd và sản phẩm cuối cùng: qto.fi/qto/view/con accept_doc (chỉ cần nhấp vào đăng nhập ...)
— Yordan Georgiev
3

Đây là một hướng dẫn rất tốt về cách xây dựng một menu ngữ cảnh tùy chỉnh với một ví dụ mã làm việc đầy đủ (không có JQuery và các thư viện khác).

Bạn cũng có thể tìm thấy mã demo của họ trên GitHub .

Họ đưa ra lời giải thích chi tiết từng bước mà bạn có thể làm theo để xây dựng menu ngữ cảnh nhấp chuột phải của riêng bạn (bao gồm mã html, css và javascript) và tóm tắt nó ở cuối bằng cách đưa ra mã ví dụ hoàn chỉnh.

Bạn có thể làm theo dễ dàng và thích ứng với nhu cầu của riêng bạn. Và không cần JQuery hoặc các thư viện khác.

Đây là cách mã trình đơn ví dụ của họ trông như thế nào:

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
      </li>
    </ul>
  </nav>

Một ví dụ làm việc (danh sách nhiệm vụ) có thể được tìm thấy trên codepen .

— Sức mạnh của ý chí
nguồn
Một bản tóm tắt ngắn sẽ giúp người đánh giá (như tôi) đánh giá tính hợp lệ của câu trả lời của bạn và có thể cứu một số độc giả theo liên kết đó. Chỉ cần một hoặc hai câu sẽ ổn và không quá nhiều công việc.
— Ingo Karkat
@IngoKarkat Cảm ơn lời khuyên của bạn. Tôi đã thêm một số lời giải thích. Hy vọng bạn tìm thấy điều này hữu ích. Nó đã giúp tôi rất nhiều.
— ForceOfWill
2

Bạn có thể làm điều đó với mã này. truy cập vào đây để xem hướng dẫn đầy đủ với tính năng phát hiện cạnh tự động http://www.voidtricks.com/custom-right-click-context-menu/ 

$(document).ready(function () {
 $("html").on("contextmenu",function(e){
        //prevent default context menu for right click
        e.preventDefault();

        var menu = $(".menu"); 

        //hide menu if already shown
        menu.hide(); 

        //get x and y values of the click event
        var pageX = e.pageX;
        var pageY = e.pageY;

        //position menu div near mouse cliked area
        menu.css({top: pageY , left: pageX});

        var mwidth = menu.width();
        var mheight = menu.height();
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();

        //if window is scrolled
        var scrTop = $(window).scrollTop();

        //if the menu is close to right edge of the window
        if(pageX+mwidth > screenWidth){
        menu.css({left:pageX-mwidth});
        }

        //if the menu is close to bottom edge of the window
        if(pageY+mheight > screenHeight+scrTop){
        menu.css({top:pageY-mheight});
        }

        //finally show the menu
        menu.show();
 }); 

 $("html").on("click", function(){
 $(".menu").hide();
 });
 });

`

— Anand Roshan
nguồn
1 
<script language="javascript" type="text/javascript">
  document.oncontextmenu = RightMouseDown; 
  document.onmousedown = mouseDown; 

  function mouseDown(e) {
    if (e.which==3) {//righClick
      alert("Right-click menu goes here");
    } 
  }

  function RightMouseDown() { 
    return false; 
  }
</script>
</body> 
</html>
— Graham Allen
nguồn
2
Bạn biết có một oncontextmenusự kiện được kích hoạt (thường là nhấp chuột phải)
— megawac
1

Một cách đơn giản mà bạn có thể làm là sử dụng onContextMothy để trả về hàm JavaScript:

<input type="button" value="Example" onContextMenu="return RightClickFunction();">

<script>
 function RightClickFunction() {
  // Enter your code here;
  return false;
 }
</script>

Và bằng cách nhập return false;bạn sẽ hủy menu ngữ cảnh.

nếu bạn vẫn muốn hiển thị menu ngữ cảnh, bạn có thể xóa return false;dòng này.

— EpicNinjaCheese
nguồn
1

Đã thử nghiệm và hoạt động trong Opera 12,17, firefox 30, Internet Explorer 9 và chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
nguồn
1
Điều đó sẽ không hiển thị cảnh báo khi menu ngữ cảnh xuất hiện? Tôi không thấy nó sẽ tùy chỉnh nó như thế nào.
— Stephen Ostermiller
1 
<script>
function fun(){
document.getElementById('menu').style.display="block";
}

</script>
<div id="menu" style="display: none"> menu items</div>

<body oncontextmenu="fun();return false;">

Tôi đang làm gì ở đây vậy

  1. Tạo menu div tùy chỉnh của riêng bạn và đặt vị trí: tuyệt đối và hiển thị: không có trong trường hợp.
  2. Thêm vào trang hoặc thành phần được nhấp vào sự kiện oncontextmenu.
  3. Hủy hành động trình duyệt mặc định với trả về false.

  4. Người dùng js để gọi hành động của riêng bạn.

— Chris Enitan
nguồn
0

Bạn nên nhớ nếu bạn muốn sử dụng giải pháp chỉ dành cho Firefox, nếu bạn muốn thêm nó vào toàn bộ tài liệu, bạn nên thêm contextmenu="mymenu"vào <html>thẻ không vào bodythẻ.
Bạn nên chú ý đến điều này.

— WowOWwoW
nguồn
0 
<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

Bạn có thể điều chỉnh và sửa đổi mã này để tạo ngữ cảnh tốt hơn, hiệu quả hơn. Đối với việc sửa đổi một ngữ cảnh hiện có, tôi không chắc làm thế nào để làm điều đó ... Hãy xem câu đố này để biết quan điểm có tổ chức. Ngoài ra, hãy thử nhấp vào các mục trong ngữ cảnh của tôi. Họ sẽ cảnh báo bạn một vài tin nhắn tuyệt vời. Nếu họ không làm việc, hãy thử một cái gì đó ... phức tạp hơn.

— Tự tử
nguồn
0

Tôi sử dụng một cái gì đó tương tự như sau jsfiddle

function onright(el, cb) {
    //disable right click
    document.body.oncontextmenu = 'return false';
    el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        if (~~(e.button) === 2) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            return false;
        }
    });

    // then bind Your cb
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        ~~(e.button) === 2 && cb.call(el, e);
    });
}

nếu Bạn nhắm mục tiêu các trình duyệt IE cũ hơn, dù sao bạn cũng nên hoàn thành nó với 'Đính kèm; trường hợp

— liên bang
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.