ホームページ >ウェブフロントエンド >htmlチュートリアル >カスタムマウスの右クリックメニューをJSで実装する方法

カスタムマウスの右クリックメニューをJSで実装する方法

php中世界最好的语言オリジナル: 2018-02-26 10:05:283621ブラウズ

今回はJSでカスタムマウスの右クリックメニューを実装する方法を紹介します。 JSでカスタムマウスの右クリックメニューを実装するための注意点とは何ですか。実際のケースを見てみましょう。

カスタマイズされたマウスの右クリックメニュー要素:

ページ上のデフォルトの右クリックイベントを無効にする

右クリックメニューのスタイルとメニューが表示される場所を設定する (メニューの場所は、マウスクリック位置)

マウスが指定されたコントロール内にある (その領域を右クリックするとメニューが表示されます) (デフォルトのメニューは非表示になっており、マウスを右クリックすると表示されます)

レンダリング

カスタムマウスの右クリックメニューをJSで実装する方法

コードは以下の通りです:

HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="right-click.css" />
</head>
<body>
    <div id="contain-friend">右击显示菜单</div>
    <label id="label1"></label>
    <div id="menu-friend">
        <div>
            <button id="btn1">菜单一</button>
        </div>
        <div>
            <button id="btn2">菜单二</button>
        </div>
    </div>
    <script src="right-click.js"></script>
</body>
</html>

HTML

JS code

メニューの配置は主に最初のif文部分にあり、その後に検証ボタンの効果が続きます。。

メニューの配置にはmenu1.style.leftとmenu1.style.topが使用されています。cssスタイルシートから、menu1のposition属性は絶対配置であり、style.topは相対配置であることがわかります。最も近い位置属性値は静的ではありません。これが本体です。

メニューの位置は、

ページレイアウトの具体的な状況に応じて決定する必要があり、e.offsetX/Y、e.clientX/Yなどを考慮してここに追加します。スクロールバーを追加します (この例には実際にはスクロールバーはありません)。

window.onload = function() {
    //以下为自定义右击菜单
    document.oncontextmenu = function(e) {
        //阻止执行浏览器默认右击事件
        e.preventDefault();
        //聊天室好友列表
        if (document.getElementById("menu-friend")) {
            var menu1 = document.getElementById("menu-friend");
            menu1.style.display = "block";
            document.getElementById("contain-friend").onmousedown = function(e) {　　　　　 //菜单定位
                menu1.style.left = e.offsetX + "px";
                menu1.style.top = document.documentElement.scrollTop + e.clientY + "px";
                //alert(menu1.style.top)
                if (document.getElementById("contain-friend")) {
                    if (e.button == 2) {
                        menu1.style.visibility = "visible";
                    } else {
                        menu1.style.visibility = "hidden";
                    }
                }
            }
        }
    }
    if (document.getElementById("btn1")) {
        document.getElementById("btn1").onmousedown = function(e) {
            document.getElementById("label1").innerHTML = "你点击了菜单一"
        }
    }
    if (document.getElementById("btn2")) {
        document.getElementById("btn2").onmousedown = function(e) {
            document.getElementById("label1").innerHTML = "你点击了菜单二"
        }
    }
    return false;
    //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行
}

JavaScript ファイル

CSS スタイルシート

1/*カスタマイズされた右クリックメニュー*/

.contain {
    background-color: #D1CEBC;
    height: 100px;
    width: 300px;
}
.menu {
    width: 150px;
    background-color: white;
    visibility: hidden;
    position: absolute;
    box-shadow: 0px 0px 10px #D1CEBC
}
.menu-item {
    background-color: #fff;
    margin: 0;
}
.menu-item-btn {
    width: 146px;
    margin: 2px;
    border: 0;
    text-align: left;
    padding-left: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    color: #000;
}
.menu-item-btn:hover {
    background-color: #D1CEBC;
}

これらの事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、他の内容に注意してください。関連記事は php 中国語 Web サイトにあります。