mouseleave olayı

Seçilen elemanlardan mouse işaretçisi eyrıldığında çalışacak olay işleyiciyi bağla ya da bir elemanda bu olayı tetikle.

İçindekiler :

.on( "mouseleave" [, eventData ], handler ) Dönen Değer : jQuery Nesnesi
Açıklama : Seçilen elemanlardan mouse işaretçisi ayrıldığında çalışacak bir olay işleyici bağlar.

.on( "mouseleave" [, eventData ], handler ) Eklendiği Versiyon 1.7
"mouseleave"
Tip : String
"mouseleave" sabit string değeri
eventData
Tip : Herhangi birşey
Olay işleyiciye iletilecek veriyi içeren bir nesne.
handler
Tip : Fonksiyon( Olay eventObject )
Mouse işaretçisi elemandan ayrıldığında çalıştırılacak olan fonksiyon.

Bu sayfa mouseleave olayını anlatıyor. Kaldırılmış olan .mouseleave() metodu için linkteki sayfaya bakınız.

mouseleave JAvaScript olayı aslında Internet Explorer'a tescilli. Olayın genel faydası yüzünden jQuery olayı simüle ederek tarayıcıdan bağımsız çalışmasını sağlar. Bu olay mouse işaretçisi eleman üzerinden ayrıldığında o elemana gönderilir. Herhangi bir HTML eleman bu olaya bağlanabilir.

Örnek olarak şu HTML:

   <style>
      div.bordered {
         margin: 10px;
         border: 1px solid;
         padding: 10px;
      }
   </style>
   <div id="outer" class="bordered">
      Outer
      <div id="inner" class="bordered">
         Inner
      </div>
   </div>
   <div id="other" class="bordered">
      Trigger the handler
   </div>
   <div id="log"></div>
Outer
Inner
Trigger the handler

Olay işleyici elemanların herhangi birine verilebilir.

$( "#outer" ).on( "mouseleave", function() {
   $( "#log" ).append( "<div>`mouseleave` handler çağrıldı.</div>" );
} );
Outer
Inner
Trigger the handler

Şimdi mouse şaretçisi dıştaki <div> sınırlarından dışarı çıkarken <div id="log"> elemanına mesaj eklenir. Ayrıca olayı diğer bir elemana tıklayınca tetikleyebilirsiniz.

$( "#other" ).on( "click", function() {
  $( "#outer" ).trigger( "mouseleave" );
} );
Outer
Inner
Trigger the handler

Bu kod çalıştırıldıktan sonra Trigger bölgesine tıklanınca da mesaj satırı eklenecektir.

mouseleave olayı mouseout'dan olayı yukarı yayması (bubling) bakımından farklıdır. Bu örnekte eğer mouseout kullanılmış olsa, içteki bölgeden ayrılınca da olay tetiklenir. Bu genelde istenmeyen davranışlara sebep olur. Diğer yandan mouseleave sadece bağlandığı elemandan mouse ayrıldığı anda oluşur, iç elemanlardan birinden ayrılırken tetiklenmez. Bu yüzden örnekteki dıştaki elemandan mouse ayrılırken olay tetiklenir ama içteki elemandan ayrılırken bir şey olmaz.



Örnekler:

Tetiklenen mouseout ve mouseleave olaylarını say. Olaylardan mouseout içteki elemandan da mouse ayrılınca tetiklenirken, mouseleave ise sadece bağlandığı elemandan mouse işaretçisi ayrılınca tetiklenir.

<style>  
   div.out {
      width: 40%; height: 120px;
      margin: 0 15px;
      background-color: #d6edfc;
      float: left;
   }
   div.in {
      width: 60%; height: 60%;
      background-color: #fc0;
      margin: 10px auto;
   }
   p {
      line-height: 1em;
      margin: 0; padding: 0;
   }
</style>
<div class="out overout">
   <p>move your mouse</p>
   <div class="in overout"><p>move your mouse</p><p>0</p></div>
   <p>0</p>
</div>

<div class="out enterleave">
   <p>move your mouse</p>
   <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
   <p>0</p>
</div>
<script>
   var i = 0;
   $( "div.overout" )
      .on( "mouseover", function() {
         $( "p", this ).first().text( "mouse over" );
      } )
      .on( "mouseout", function() {
         $( "p", this ).first().text( "mouse out" );
         $( "p", this ).last().text( ++i );
      } );
   
   var n = 0;
   $( "div.enterleave" )
      .on( "mouseenter", function() {
         $( "p", this ).first().text( "mouse enter" );
      } )
      .on( "mouseleave", function() {
         $( "p", this ).first().text( "mouse leave" );
         $( "p", this ).last().text( ++n );
      } );
</script>

move your mouse

move your mouse

0

0

move your mouse

move your mouse

0

0

.trigger( "mouseleave" ) Dönen Değer : jQuery Nesnesi
Açıklama : Seçilen elemanlarda "mouseleave" olayını tetikler.

.trigger( "mouseleave" ) Eklendiği Versiyon 1.0
"mouseleave"
Tip : String
"mouseleave" sabit string değeri

.on( "mouseleave", ... ). açıklamasına bakınız.

.

.