menu klik kanan tersuai jquery, pilih semua, selection_jquery terputus

Baru-baru ini, saya perlu melaksanakan beberapa kesan tersuai dalam projek, seperti menu klik kanan, pilih semua, pemilihan terputus, dsb. Saya fikir perkara utama adalah untuk menjelaskan logik dan hubungan peristiwa. Untuk mencapai matlamat ini, terdapat juga pemalam siap sedia tersedia, seperti jQuery UI boleh dipilih.

1. Klik kanan menu
Apabila menyemak imbas web, klik kanan tetikus (atau ctrl+klik kiri pada pad sentuh) dan item menu klik kanan lalai penyemak imbas akan muncul, seperti ini:

Tetapi apabila anda ingin menyesuaikan klik kanan pada elemen, seperti ini:

Anda mesti melumpuhkan menu lalai penyemak imbas terlebih dahulu dan mendengar acara menu konteks Kod utama adalah seperti berikut:

$(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. Pilih semua
Ctrl+A lalai (arahan+A di bawah MAC) akan memilih keseluruhan halaman web atau elemen boleh diedit yang difokuskan.

<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>

Jika hanya terdapat dua div ini pada halaman, tekan ctrl/cmd+A dan kedua-dua div akan dipilih Jika anda hanya mahu memilih kandungan div#box, cara mudahnya ialah menambah contentEditable=true to div. Cara lain ialah mendengar acara papan kekunci.

Simulasikan memilih semua sub-elemen p div#box dan menyerlahkannya:

$(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 mendayakan pemilihan berterusan
Shift digabungkan dengan butang kanan tetikus untuk mencapai pemilihan elemen berterusan, yang hanya disimulasikan di sini.

<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>

Apabila memegang syif, penyemak imbas mempunyai pilihan berterusan lalai, lumpuhkannya dahulu:

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

Untuk versi IE yang lebih rendah, gunakan acara selectstart:

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

Daftarkan acara klik untuk p, dan dengar acara keydown dan keyup objek dokumen:

$(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. Pemilihan tidak berterusan
Pemilihan tidak berterusan memerlukan pemantauan kekunci ctrl (kunci arahan di bawah mac) dan mendaftarkan acara klik untuk elemen.

 $(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');
  }
 })

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan jquery.