linuxism :: jQuery - 마우스 오른쪽 버튼

jQuery - 마우스 오른쪽 버튼

Development/jQuery 2012. 6. 3. 20:09

$(document).ready(function() {
  $('span.demo1').contextMenu('myMenu1', {
   bindings: {
    'open': function(t) {
     alert('Trigger was '+t.id+'\nAction was Open');
    },
    'email': function(t) {
     alert('Trigger was '+t.id+'\nAction was Email');
    },
    'save': function(t) {
     alert('Trigger was '+t.id+'\nAction was Save');
    },
    'delete': function(t) {
     alert('Trigger was '+t.id+'\nAction was Delete');
    }
   }
  });
});
</script>

<div class="contextMenu" id="myMenu1">
<ul>
<li id="open">Open</li>
<li id="email">Email</li>
<li id="save">Save</li>
<li id="close">Close</li>
</ul>
</div>

<span class="demo1" id="quickDemo" style="border: 1px solid #888;">
    <b>DEMO</b> right-click me!!
</span>

출처 : http://www.trendskitchens.co.nz/jquery/contextmenu/

===================================================================================

페이지 전체 뿐만 아니라 특정 부분에도 손쉽게 마우스 오른쪽 버튼을 막을 수 혹은 핸들링 할 수 있게 해줍니다.

예제 코드:

$(document).ready( function() {

  // Capture right click
$("#selector").rightClick( function(e) {
  // Do something
  });

  // Capture right mouse down
$("#selector").rightMouseDown( function(e) {
  // Do something
  });

  // Capture right mouseup
$("#selector").rightMouseUp( function(e) {
  // Do something
  });

  // Disable context menu on an element
$("#selector").noContext();

});

[출처] [jQuery]오른쪽마우스 클릭 금지|작성자 빼빼로

출처 - http://blog.naver.com/PostView.nhn?blogId=choiye84&logNo=130108943430

===================================================================================

mousedown

원문 링크 http://api.jquery.com/mousedown/

.mousedown( handler(eventObject) )Returns : jQuery

개요 : "mousedown" JavaScript 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.

.mousedown( handler(eventObject) )
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mousedown( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달할 데이터 집합.
handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.mousedown( )

이 함수는 .bind('mousedown', handler) 와 .trigger('mousedown') 를 줄여 표현한 것입니다.

mousedown 이벤트는 마우스 포인터를 요소에 올려놓고 마우스 버튼을 누르면 발생합니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.

예를들어:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

<div>에 이벤트를 바인딩 하려면 :

$('#target').mousedown(function() {
  alert('Handler for .mousedown() called.');
});

이 요소를 클릭하면 알림창이 나타납니다.

다른 요소를 클릭해서 이벤트를 발생시킬 수도 있습니다.

$('#other').click(function() {
  $('#target').mousedown();
});

위 코드를 추가하고 실행시키면 위와 같은 결과를 볼 수 있습니다.

mousedown 이벤트는 마우스 버튼을 클릭하면 발생합니다. 특정 버튼을 누르면 이벤트는 which 속성을 이용할 수 있게 됩니다. 이 속성은 모든 브라우져에서 지원하지는 않습니다. Internet Explorer 는 대신 button을 사용합니다. 하지만 jQuery 는 어떤 브라우져에서도 안전하게 사용할 수 있도록 표준화를 하였습니다. which 의 값의 의미는 다음과 같습니다. 1 이면 left 버튼, 2 이면 중간 버ensuring튼(휠), 3 이면 오른쪽 버튼을 뜻합니다.

예 제
마우스의 mouseup 와 mousedown 이벤트 발생을 텍스트로 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Press mouse and release here.</p>

<script>
    $("p").mouseup(function(){
      $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });

</script>

</body>
</html>

미리보기

글씨 있는 부분을 마우스를 이용해서 클릭해 보세요.

마우스 이벤트 감지는 많이 필요한 내용이죠.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

출처 - http://findfun.tistory.com/289

===========================================================================

참고 사이트

http://www.abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

==================================================================================

j(document).bind("contextmenu", function(e){

alert("오른쪽마우스금지입니다.");

return false;

});

저작자표시

'Development > jQuery' 카테고리의 다른 글

jQuery 추천 플러그인 (0)	2012.06.07
jQuery - 선택자 (0)	2012.06.03
jQuery - URL을 파싱 (0)	2012.05.29
jQuery - 플러그인 모음 (0)	2012.05.29
jQuery - Url Parameter 추출 (0)	2012.05.29