자바스크립트에서 오른쪽 클릭 숨기는 방법

JavaScript에서 마우스 오른쪽 버튼 클릭을 숨기는 방법: 1. 해당 코드 파일을 엽니다. 2. "window.oncontextmenu=function(e){e.preventDefault();}" 메서드를 사용하여 마우스 오른쪽 버튼 클릭 메뉴를 비활성화합니다. .

이 기사의 운영 환경: Windows 7 시스템, javascript1.8.5, Dell G3 컴퓨터.

JavaScript에서 오른쪽 클릭을 숨기는 방법은 무엇입니까?

js는 마우스 오른쪽 클릭 메뉴를 설정하거나 비활성화합니다.

사용자가 마우스 오른쪽 버튼을 클릭하면 oncontextmenu 이벤트가 트리거됩니다.

js는 마우스 오른쪽 클릭 메뉴를 비활성화합니다.

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要！！
    e.preventDefault();
}

js는 마우스 오른쪽 버튼 클릭 메뉴

html 사용자 정의 가능 메뉴 항목 정의

<div id="menu">
            <div class="menu">功能1</div>
            <div class="menu">功能2</div>
            <div class="menu">功能3</div>
            <div class="menu">功能4</div>
            <div class="menu">功能5</div></div>

css 메뉴 항목 스타일 설정

#menu{
    width: 0; /*设置为0 隐藏自定义菜单*/
    height: 125px;
    overflow: hidden; /*隐藏溢出的元素*/
    box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
    position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
    width: 130px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
}

js 메뉴 표시 및 숨기기 제어

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要！！
    e.preventDefault();
    //获取我们自定义的右键菜单
    var menu=document.querySelector("#menu");
    //根据事件对象中鼠标点击的位置，进行定位
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';
    //改变自定义菜单的宽，让它显示出来
    menu.style.width='100px';
    menu.style.height='auto';
}
//鼠标左键任意位置单击, 关闭右键菜单
window.onclick=function(e){
    //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
    document.querySelector('#menu').style.height=0;
}

추천 학습: "js 기본 튜토리얼 "

위 내용은 자바스크립트에서 오른쪽 클릭 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!