Program Tip

마우스 오른쪽 버튼 클릭에 이벤트 바인딩

programtip 2020. 12. 6. 22:00
반응형

마우스 오른쪽 버튼 클릭에 이벤트 바인딩


브라우저 컨텍스트 메뉴를 비활성화 한 후 마우스 오른쪽 버튼을 클릭하여 일부 작업을 트리거하려면 어떻게해야합니까?

나는 이것을 시도했다. . .

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        $('.alert').fadeToggle();
        return false;
    });
});

jQuery에는 내장 된 oncontextmenu 이벤트 핸들러가 없지만 다음과 같이 할 수 있습니다.

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};

  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { 
      alert('Right mouse button!'); 
      return false; 
    } 
    return true; 
  }); 
});

기본적으로 DOM 요소의 oncontextmenu 이벤트를 취소하여 브라우저 컨텍스트 메뉴를 비활성화 한 다음 jQuery로 mousedown 이벤트를 캡처하면 이벤트 인수에서 어떤 버튼을 눌렀는지 알 수 있습니다.

여기 에서 위의 예를 시도해 볼 수 있습니다 .


함수가 너무 일찍 반환됩니다. 아래 코드에 주석을 추가했습니다.

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
        $('.alert').fadeToggle(); // this line never gets called
    });
});

return false;다음 줄로 바꿔보십시오 .


이벤트 핸들러를 사용하십시오. 다음과 같이 작동합니다.

$('.js-my-element').bind('contextmenu', function(e) {
     e.preventDefault();
     alert('The eventhandler will make sure, that the contextmenu dosn't appear.');
});

나는 여기에서이 대답을 찾았고 이것을 이렇게 사용하고 있습니다.

내 라이브러리의 코드 :

$.fn.customContextMenu = function(callBack){
    $(this).each(function(){
        $(this).bind("contextmenu",function(e){
             e.preventDefault();
             callBack();
        });
    }); 
}

내 페이지 스크립트의 코드 :

$("#newmagazine").customContextMenu(function(){
    alert("some code");
});

document.oncontextmenu = function() {return false;}; //disable the browser context menu
$('selector-name')[0].oncontextmenu = function(){} //set jquery element context menu 

Is contextmenu an event?

I would use onmousedown or onclick then grab the MouseEvent's button property to determine which button was pressed (0 = left, 1 = middle, 2 = right).


To disable right click context menu on all images of a page simply do this with following:

jQuery(document).ready(function(){
    // Disable context menu on images by right clicking
    for(i=0;i<document.images.length;i++) {
        document.images[i].onmousedown = protect;
    }
});

function protect (e) {
    //alert('Right mouse button not allowed!');
    this.oncontextmenu = function() {return false;};
}

.contextmenu method :-

Try as follows

<div id="wrap">Right click</div>

<script>
$('#wrap').contextmenu(function() {
  alert("Right click");
});
</script>

.mousedown method:-

$('#wrap').mousedown(function(event) {

        if(event.which == 3){
            alert('Right Mouse button pressed.');
        }  
});

참고URL : https://stackoverflow.com/questions/706655/bind-event-to-right-mouse-click

반응형