jquery 사용자 정의 마우스 오른쪽 버튼 클릭 메뉴, 모두 선택, 불연속 Selection_jquery

최근에는 프로젝트에서 마우스 오른쪽 버튼 클릭 메뉴, 모두 선택, 불연속 선택 등 몇 가지 사용자 정의 효과를 구현해야 합니다. 가장 중요한 것은 로직과 이벤트 관계를 명확히 하는 것이라고 생각합니다. 이를 달성하기 위해 jQuery UI의 선택 가능과 같은 기성 플러그인도 사용할 수 있습니다.

1. 우클릭 메뉴
웹을 탐색할 때 마우스 오른쪽 버튼을 클릭하거나(또는 터치패드에서 Ctrl+왼쪽 클릭) 다음과 같이 브라우저의 기본 오른쪽 클릭 메뉴 항목이 나타납니다.

그러나 다음과 같이 요소를 마우스 오른쪽 버튼으로 클릭하여 사용자 정의하려는 경우:

먼저 브라우저의 기본 메뉴를 비활성화하고 contextmenu 이벤트를 수신해야 합니다.

$(function(){
 $('#box').on('contextmenu',function(event){
 event.preventDefault();
  $(this).trigger('click');
  $('#menulist').css({
   top: event.pageY,
   left: event.pageX
  });
 });
 $('#box').click(function(){
  $('#menulist').css('display','block');
 });
})

2. 모두 선택
기본 ctrl+A(MAC에서는 command+A)를 누르면 전체 웹페이지나 집중적으로 편집 가능한 요소가 선택됩니다.

<div id='box'>
 <p class='first'>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
</div>
<div id='other'>
 <p class='first'>这是另外一个div，这是另外一个div，</p>
 <p>这是另外一个div，这是另外一个div，</p>
 <p>这是另外一个div，这是另外一个div，</p>
 <p>这是另外一个div，这是另外一个div，</p>
</div>

페이지에 이 두 개의 div만 있는 경우 ctrl/cmd+A를 누르면 두 div가 모두 선택됩니다. div#box의 콘텐츠만 선택하려는 경우 간단한 방법은 contentEditable=true를 추가하는 것입니다. 사업부. 또 다른 방법은 키보드 이벤트를 수신하는 것입니다.

div#box의 모든 하위 요소 p를 선택하고 강조 표시하는 것을 시뮬레이션합니다.

$(function(){
 $(document).keydown(function(event){
 //windows下是event.ctrlKey
 if(event.metaKey && event.which === 65){
  event.preventDefault();
  $('#box>p').trigger('click');
 }
 });
 $('#box').on('click', 'p', function(){
 $(this).css('color','red');
 });
});

3. Shift를 사용하면 연속 선택이 가능합니다
Shift 키를 마우스 오른쪽 버튼과 결합하여 요소를 연속적으로 선택할 수 있으며, 이는 여기에서 간단히 시뮬레이션됩니다.

<div id='box' class="unselect">
 <p class='first'>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
 <p>这是个div，这是个div，</p>
</div>

Shift를 누르고 있으면 브라우저에 기본 연속 선택이 있으므로 먼저 비활성화하세요.

.unselect{
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

낮은 버전의 IE의 경우 selectstart 이벤트를 사용하세요.

$('#box')[0].onselectstart = function(e){
  e.preventDefault();
  return false;
 };

p에 대한 클릭 이벤트를 등록하고 문서 개체의 keydown 및 keyup 이벤트를 수신합니다.

$(document).keydown(function(e){
  if(e.shiftKey){
   shiftkey = 1;
  }
 }).keyup(function(){
  shiftkey = 0;
 });
$('#box').on('click','p',function(){
  if(shiftkey === 1){
   second = $(this).index();
   for(var min = Math.min(first,second); min <= Math.max(first,second); min++){
    $('#box').find('p').eq(min).css('color','red');
   }
  } else {
   first = $(this).index();
   $(this).css('color','red').siblings().css('color','black');
  }
 })

4. 불연속 선택
연속 선택을 하려면 Ctrl 키(Mac에서는 Command 키)를 모니터링하고 요소에 대한 클릭 이벤트를 등록해야 합니다.

 $(document).keydown(function(e){
  if(e.metaKey){ //win是e.ctrlKey
   ctrlkey = 2;
  }
 }).keyup(function(){
  ctrlkey = 0;
 });
 $('#box').on('click','p',function(){
  if(ctrlkey === 2){
   $(this).css('color','red');
  } else {
   $(this).css('color','red').siblings().css('color','black');
  }
 })

위 내용은 이 글의 전체 내용입니다. jquery 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.