最近在項目中要實現一些自定義效果，例如右鍵菜單、全選、不連續選擇等等，個人認為主要是理清楚邏輯和事件關系。要實現這些，也有現成的插件可以用，如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程序設計有所幫助。
新聞熱點
疑難解答
