Penyelesaian kepada peristiwa tetikus dan alih tetikus dicetuskan apabila tetikus melepasi kemahiran elemen_javascript kanak-kanak-tutorial js-php.cn

Penyelesaian kepada peristiwa tetikus dan alih tetikus dicetuskan apabila tetikus melepasi kemahiran elemen_javascript kanak-kanak

WBOY

Lepaskan： 2016-05-16 15:49:06

asal

1452 orang telah melayarinya

Apa yang saya ingin capai: Apabila tetikus memasuki kotak hitam, kotak oren melakukan animasi fade-in apabila julat kotak hitam bergerak (walaupun ia melepasi kotak merah jambu, animasi masih tidak dicetuskan); apabila tetikus bergerak keluar, kotak oren hilang.

Penjelasan masalah yang dihadapi: Apabila tetikus bergerak ke dalam kotak hitam, kotak oren melakukan animasi pudar masuk, tetapi apabila tetikus melepasi kotak hitam ke kotak merah jambu, kotak oren hilang, dan kemudian animasi fade-in dilakukan semula. Apabila tetikus bergerak keluar dari kotak merah jambu ke kotak hitam, animasi fade-in kotak oren dilaksanakan semula. Ini bukan yang saya mahu.

Kod awal:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
 <meta charset="utf-8">
 <title>mouseover mouseout</title>
 <style type="text/css" media="screen">
   .parent{
 width:200px;
 height:200px;
 background:black;
}
.child{
 width:100px;
 height:100px;
 background:pink;
}
.a1{
 width:40px;
 height:40px;
 background:orange;
 display:none;
}
 </style>
</head>
<body>
<div class="parent">
 <div class="child"></div>
 <div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){ 
  $('.a1').show(1000);
 });
 $('.parent').on('mouseout',function(e){
  $('.a1').css('display','none');
 });
</script>
</body>
</html>

Salin selepas log masuk

Mula-mula kami terangkan sebab-sebab mengapa masalah ini berlaku.

Apabila tetikus bergerak dari kotak hitam ke kotak merah jambu, tetikus keluar kotak hitam dicetuskan, dan disebabkan peristiwa menggelegak, peristiwa alih tetikus kotak hitam dicetuskan serta-merta, jadi sebenarnya, kotak oren hilang dahulu, dan kemudian Lakukan animasi fade-in dengan segera. Ini adalah proses yang kita lihat.

Apabila tetikus bergerak dari kotak merah jambu ke kotak hitam, tetikus keluar dari kotak hitam dicetuskan semula (kerana tidak kira sama ada tetikus melalui elemen yang dipilih atau sub-elemennya, peristiwa alih tetikus akan dicetuskan), dan tetikus juga dicetuskan pada masa yang sama Jadi terdapat proses melaksanakan kesan pudar masuk semula.

Kaedah 1: Gunakan mouseleave/mouseout bukannya mouseover/mouseout [Kaedah terbaik]

Mari kita lihat dahulu perbezaan penggunaan antara mouseout&mouseover dan mouseleave&mouseenter

tetikus dan tetikus masuk

Acara alih tetikus akan dicetuskan apabila penuding tetikus melepasi elemen yang dipilih atau sub-elemennya.
Acara tetikus hanya akan dicetuskan apabila penunjuk tetikus melepasi dari luar elemen ke dalam elemen yang dipilih (ke dalam elemen).

tetikus keluar dan tetikus pergi

Acara keluar tetikus akan dicetuskan sama ada penuding tetikus meninggalkan elemen yang dipilih atau mana-mana elemen anak.
Peristiwa mouseleave hanya dicetuskan apabila penunjuk tetikus melepasi elemen yang dipilih (di luar elemen).

Anda boleh melihat contoh mudah untuk melihat perbezaan antara keduanya

Jadi kod yang dipertingkatkan boleh menjadi

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
 <meta charset="utf-8">
 <title>mouseover mouseout</title>
 <style type="text/css" media="screen">
   .parent{
 width:200px;
 height:200px;
 background:black;
}
.child{
 width:100px;
 height:100px;
 background:pink;
}
.a1{
 width:40px;
 height:40px;
 background:orange;
 display:none;
}
 </style>
</head>
<body>
<div class="parent">
 <div class="child"></div>
 <div class="a1"></div>
</div>
<script>
$('.parent').on('mouseenter',function(e){ 
  $('.a1').show(1000);
 });
 $('.parent').on('mouseleave',function(e){
  $('.a1').css('display','none');
 });
</script>
</body>
</html>

Salin selepas log masuk

Kaedah 2: Gunakan e.stopPropagation() untuk mengelakkan acara daripada terus merebak

e.stopPropagation() akan menghentikan penyebaran selanjutnya peristiwa dalam peringkat tangkapan, pemprosesan sasaran atau menggelegak proses penyebaran. Selepas memanggil kaedah ini, pengendali untuk acara pada nod ini akan dipanggil dan acara tidak lagi akan dihantar ke nod lain.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
 <meta charset="utf-8">
 <title>mouseover mouseout</title>
 <style type="text/css" media="screen">
   .parent{
 width:200px;
 height:200px;
 background:black;
}
.child{
 width:100px;
 height:100px;
 background:pink;
}
.a1{
 width:40px;
 height:40px;
 background:orange;
 display:none;
}
 </style>
</head>
<body>
<div class="parent">
 <div class="child"></div>
  <div class="a1"></div>
</div>
 <script>
 $('.parent').on('mouseover',function(e){
   $('.a1').show(1000);
 });
 $('.parent').on('mouseout',function(e){
   $('.a1').css('display','none');
 });
 $('.child').on('mouseover',function(e){
  e.stopPropagation();
  $('.a1').css('display','block');
  //这是保证动画体的末状态不变
 });
 $('.child').on('mouseout',function(e){
  e.stopPropagation();
  //防止从粉色框移出到黑色框时再次触发其他事件
 })
 </script>
</body>
</html>

Salin selepas log masuk

Kembangkan pemikiran anda:

1. Apa yang perlu dilakukan jika terdapat terlalu banyak elemen kanak-kanak? Adakah setiap satu perlu terikat dengan e.stopPropagation()?

Gunakan pemilih jquery .children(), seperti $('.parent').children(). Mendapatkan elemen anak bagi setiap elemen dalam set elemen dipadankan.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.