jquery自訂右鍵選單、全選、不連續選擇_jquery

最近在專案中要實現一些自訂效果，例如右鍵選單、全選、不連續選擇等等，個人認為主要是理清楚邏輯和事件關係。要實作這些，也有現成的外掛可以用，例如jQuery UI的selectable。

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的內容，簡單地方式是給該div加上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註冊click事件，同時要監聽document物件的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鍵)，同時為元素註冊click事件。

 $(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程式設計有所幫助。