jQuery 사용자 정의 요소 마우스 오른쪽 버튼 클릭 이벤트-JS 튜토리얼-php.cn

jQuery 사용자 정의 요소 마우스 오른쪽 버튼 클릭 이벤트

小云云

풀어 주다： 2018-01-17 13:11:45

원래의

1959명이 탐색했습니다.

이 글은 주로 jQuery 커스텀 요소 우클릭 이벤트(구현 사례)를 다루고 있습니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

대부분의 경우 우리는 페이지와 상호 작용하기 위해 왼쪽 클릭을 사용하고, 오른쪽 클릭은 대부분 개발자가 요소를 검토하기 위해 사용합니다. 때로는 더 나은 상호 작용을 달성하기 위해 마우스 오른쪽 클릭 동작을 사용자 정의해야 하는 경우도 있습니다. 왼쪽 버튼으로 앞으로, 오른쪽 버튼으로 뒤로 이동할 수 있는 만화입니다.

첫 번째 단계는 브라우저의 기본 오른쪽 클릭 동작, 즉 팝업 상자를 차단하는 것입니다.

먼저 팝업 차단 기능을 대상 요소에 바인딩합니다.

//阻止浏览器默认右键点击事件
$("p").bind("contextmenu", function(){
  return false;
})

로그인 후 복사

이렇게 하면 p 요소의 마우스 오른쪽 버튼 클릭 이벤트가 차단되고 원하는 경우 브라우저의 다른 영역은 영향을 받지 않습니다. 전체 페이지 클릭 이벤트에서 마우스 오른쪽 버튼 클릭 이벤트를 차단하려면 다음과 같이 하세요:

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

로그인 후 복사

다음으로 오른쪽 클릭 응답 기능을 요소에 바인딩할 수 있습니다:

$("p").mousedown(function(e) {
  console.log(e.which);
  //右键为3
  if (3 == e.which) {
    $(this).css({
      "font-size": "-=2px"
    });
  } else if (1 == e.which) {
    //左键为1
    $(this).css({
      "font-size": "+=3px"
    });
  }
})

로그인 후 복사

예제 효과는 오른쪽 클릭의 글꼴 크기가 클릭이 줄어들고, 왼쪽 클릭의 글꼴 크기가 확대되며, 다른 영역은 기본 오른쪽 클릭 이벤트에 반응할 수 있습니다.

전체 코드:

<head>
  <style type="text/css">
  p{
    font-size:20px;
  }
  </style>
  <script src="../jquery.js"></script>
  <script>
  $(function() {
    //阻止浏览器默认右键点击事件
    /*document.oncontextmenu = function() {
      return false;
    }*/
    //某元素组织右键点击事件
    $("p").bind("contextmenu", function(){
      return false;
    })
    $("p").mousedown(function(e) {
      console.log(e.which);
      //右键为3
      if (3 == e.which) {
        $(this).css({
          "font-size": "-=2px"
        });
      } else if (1 == e.which) {
        //左键为1
        $(this).css({
          "font-size": "+=3px"
        });
      }
    })
  })
  </script>
</head>

<body>
  <p>
    p
  </p>
</body>

로그인 후 복사