집 > 기사 > 웹 프론트엔드 > JS에서 사용자 정의 마우스 오른쪽 버튼 클릭 메뉴를 구현하는 방법

JS에서 사용자 정의 마우스 오른쪽 버튼 클릭 메뉴를 구현하는 방법

php中世界最好的语言원래의: 2018-02-26 10:05:283587검색

이번에는 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의 위치 속성이 절대 위치로 지정되고 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 중국어 웹사이트의 관련 기사!