將標准右鍵單擊選項添加到自定義右鍵單擊

Question

如果可能的話，我想添加標准選項，例如inspect元素，view source等來自定義右鍵單擊。

這是我的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

好了，您可以這樣實現：

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之類的按鍵。

希望能幫助到你。