Добавьте стандартные параметры правого щелчка в пользовательский щелчок правой кнопкой мыши

Question

Я хотел бы добавить стандартные параметры, такие как элемент проверки, источник просмотра и т. Д., Чтобы пользовательский щелчок правой кнопкой мыши, если это возможно.

Вот мой JavaScript ...

<script type="text/javascript"> 
    $(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; 
     case "fourth": alert("fourth"); break; 
     case "fifth": alert("fifth"); break; 
     case "sixth": alert("sixth"); break; 
     case "seventh": alert("seventh"); break; 
    } 

    // Hide it AFTER the action was triggered 
    $(".custom-menu").hide(100); 
    }); 
</script> 

Вот мой CSS ...

.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; 
} 

.custom-menu a { 
    text-decoration:none; 
    color:#333; 
} 


.custom-menu li { 
    padding: 8px 12px; 
    cursor: pointer; 
    list-style-type: none; 
} 

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

Вот мой HTML ...

<ul class='custom-menu'> 
    <li data-action="first"><a href="/">Home</a></li> 
    <li data-action="second"><a href="/profile.php?id=<?php echo $memberID; ?>">Profile</a></li> 
    <li data-action="third"><a href="/friends.php">Friends</a></li> 
    <li data-action="fourth"><a href="/messages.php">Messages</a></li> 
    <li data-action="fifth"><a href="/settings.php">Settings</a></li> 
    <li data-action="sixth"><a href="/apps.php">Apps</a></li> 
    <li data-action="seventh"><a href="/logout.php">Logout</a></li> 
</ul> 

То, что я в настоящее время работает и выглядит хорошо. Я бы предпочел сохранить его таким же образом. Просто с добавленными опциями. Я был бы очень признателен вам за это.

Answer 1

Я хотел бы добавить стандартные опции, такие как осмотр элемента, просмотреть исходный код и т.д., для пользовательских щелкните правой кнопкой мыши ...

Не был бы все мы. :-) Боюсь, что нет, такая интеграция в настоящее время не возможна. (Некоторые браузеры даже не позволяют перехватить событие.)

---

* Я говорю «в настоящее время», потому что новые интерфейсы добавляются в браузеры довольно быстро в эти дни, так что, может быть, в конце концов ...

Answer 2

Ну, вы можете реализовать like this:

document.onmousedown = custom_click; 
function custom_click(e){ 
    $("#myList").remove(); 
    if (e.button == 2) { 
     var div = $("<div id='myList'></div>").appendTo("body"); 
     div.css({ 
      "top": e.pageY, "left": e.pageX, "z-index": 9999 
     }); 
     div.append("<div>option 1</div>"); 
     div.append("<div>option 2</div>"); 
     div.append("<div>option 3</div>"); 
     div.append("<div>.......</div>"); 
     return false; 
    } 
} 

---

Чтобы использовать «проверить элемент» или другие варианты .. вы можете вызвать нажатие клавиши, как F12.

Надеюсь, это поможет.