컨텍스트 메뉴가 트리거될 때 스크립트를 실행하는 html의 oncontextmenu 이벤트-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

컨텍스트 메뉴가 트리거될 때 스크립트를 실행하는 html의 oncontextmenu 이벤트

PHPz

Nov 04, 2017 am 11:29 AM

oncontextmenu 마우스 이벤트

예

사용자가

요소에서 마우스 오른쪽 버튼을 클릭하면 실행됩니다. JavaScript :

<div oncontextmenu="myFunction()" contextmenu="mymenu">

로그인 후 복사

사용자가 요소에서 마우스 오른쪽 버튼을 클릭하고 열 때 실행되도록

oncontextmenu 이벤트를 정의하고 사용합니다. 상황에 맞는 메뉴.

참고: 모든 브라우저는 oncontextmenu 이벤트를 지원하며 contextmenu 요소는 Firefox 브라우저에서만 지원됩니다.

브라우저 지원

컨텍스트 메뉴가 트리거될 때 스크립트를 실행하는 html의 oncontextmenu 이벤트

Syntax

HTML:

<element oncontextmenu="myScript">

로그인 후 복사

JavaScript:

object.oncontextmenu=function(){myScript};

로그인 후 복사

JavaScript, addEventListener() 메소드 사용:

object.addEventListener("contextmenu", myScript);

로그인 후 복사

참고: Internet Explorer 8 이하 IE 브라우저 버전은 그렇지 않습니다 addEventListener()를 지원합니다.

기술 세부 사항

버블링 지원 여부:	예
취소 가능:	예
이벤트 유형:	MouseEvent
지원 HTML 태그:	모든 HTML 요소

브라우저에서 마우스 오른쪽 버튼을 클릭하면 기본 창이 팝업됩니다. 추가로 oncontexmenu 이벤트를 변경하면 됩니다. 스페이스 누르기 키를 누르면 브라우저 창의 스크롤 막대가 일정 거리 아래로 스크롤됩니다. 해당 이벤트를 바인딩하여 변경할 수도 있습니다.

<!doctype html>
<html>
    <head>
        <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            body{height:2000px;}
        </style>
    </head>
<body>
    <script>
/*屏蔽鼠标右键的默认事件*/
        document.oncontextmenu = function(){
            return false;
        };
/*屏蔽按空格键是滚动条向下滚动*/    
        document.onkeydown = function(ev){
            var e = ev||event;
            if(e.keyCode == 32){
                return false;
            }
        }
    </script>
</body>

</html>

로그인 후 복사

다음은 마우스 오른쪽 버튼 변경에 대한 기본 이벤트 케이스입니다.

<!doctype html>
<html>
    <head>
        <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            #box{display:none;width:150px;height:200px;background:gray;position:fixed;}
        </style>
    </head>
<body>
    <div id="box"></div>
        
    <script>
        var obox = document.getElementById("box");
        /*点击鼠标右键时执行*/
        document.oncontextmenu =  function(ev){
            var e = ev||window.event;
            var x = e.clientX;
            var y = e.clientY;
            obox.style.cssText = "display:block;top:"+y+"px;left:"+x+"px;";
            return false;
        };
    /*点击空白处隐藏*/
        document.onclick = function(){
            obox.style.display = "none";
        };
    </script>
</body>
</html>

로그인 후 복사

위 내용은 컨텍스트 메뉴가 트리거될 때 스크립트를 실행하는 html의 oncontextmenu 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.