테스트 사이트 - 개발 중인 베타 버전입니다

.contextmenu( handler )

· 8년 전 · 1455

.contextmenu( handler )


설명 : 이벤트 처리기를 "contextmenu"JavaScript 이벤트에 바인딩하거나 요소에서 해당 이벤트를 트리거하십시오.


이 방법은 .on( "contextmenu", handler )첫 번째 두 가지 변형과 .trigger( "contextmenu" )세 번째 변형에 대한 바로 가기입니다 . contextmenu이벤트는 마우스의 오른쪽 버튼이 클릭 된 요소로 전송되지만, 상황에 맞는 메뉴가 표시되기 전에. 컨텍스트 메뉴 키를 누르면 해당 html요소 에서 이벤트가 트리거됩니다 . 모든 HTML 요소는이 이벤트를 수신 할 수 있습니다. 예를 들어, HTML을 고려해보십시오.


<div id="target">

  Right-click here

</div>

이벤트 처리기는 <div>다음과 같이 바인딩 될 수 있습니다 .


$( "#target" ).contextmenu(function() {

  alert( "Handler for .contextmenu() called." );

});

이 요소를 마우스 오른쪽 버튼으로 클릭하면 경고가 표시됩니다.


.contextmenu ()에 대한 핸들러가 호출되었습니다.


수동으로 이벤트를 트리거하려면 .contextmenu()인수없이 호출하십시오 .


$( "#target" ).contextmenu();

추가 참고 사항 :


애즈 .contextmenu()방법은 단지 속기이고 .on( "contextmenu", handler ), 박리가 사용 가능하다 .off( "contextmenu" ).

예 :

"Hello World!"를 표시하려면 컨텍스트 메뉴 이벤트가 페이지의 단락에서 실행될 때 경고 상자 :



$( "p" ).contextmenu(function() {

  alert( "Hello World!" );

});

마우스 오른쪽 버튼을 클릭하여 배경색을 토글합니다.


<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>contextmenu demo</title>

  <style>

  div {

    background: blue;

    color: white;

    height: 100px;

    width: 150px;

 }

  div.contextmenu {

    background: yellow;

    color: black;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<div></div>

<span>Right click the block</span>

 

<script>

var div = $( "div:first" );

div.contextmenu(function() {

  div.toggleClass( "contextmenu" );

});

</script>

 

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15854
15853
15852
15851
15849
15848
15847
15843
15842
15841
15840
15839
15838
15837
15836
15835
15834
15833
15832
15831
15830
15829
15828
15826
15825
15824
15823
15822
15821
15820