javaScript VARSAYILAN TARAYACI EYLEMLERİ

Birçok events(olay) otomatik olarak tarayıcı işlemlerine neden olur. örneğin : 

Tarayıcı eylemlerini önleme


Tarayıcıya, işlem yapmasını istemediğimizi söylemenin iki yolu vardır:

Aşağıdaki örneklerde, bir bağlantıyı tıklattığınızda geçiş gerçekleşmez.


 Burayı Tıkla
 
veya

Tıkla

ÇIKTI :

NOT : Bir olay işleyicisi tarafından döndürülen değer genellikle dikkate alınmaz. Tek istisna, olay yoluyla atanan işleyiciden false döndürmesidir. Diğer tüm durumlarda, geri dönüş gerekmez ve herhangi bir şekilde işlenmez.

ÖRNEK : Menü


<ul id="test">

  <li><a href="https://www.google.com.tr/">1-google</a></li>
  
  <li><a href="https://www.google.com.tr/">2-google</a></li>
  
  <li><a href="https://www.google.com.tr/">3-google</a></li>
  
</ul>

ÇIKTI :

Yukarida ki tüm menü öğeleri düğmeler ve bağlantıların URL'si çalışmayacak şekilde HTML işaretleme yapılabilir.

Bu nedenle, işaretlemede <a> etiketi kullanıyoruz. Ancak genellikle tıklama tamamen JavaScript ile işlenecek. Dolayısıyla, varsayılan tarayıcı işlemini iptal etmeliyiz.


test.onclick = function(event) {

  if (event.target.nodeName != 'A') return;

  var href = event.target.getAttribute('href');
  
  alert( href ); // href içeriğini gösterir.

  return false; // URL işlemini iptal eder
  
};

Return false değerini atlarsak, kodumuz çalıştırıldıktan sonra tarayıcı, "varsayılan eylemi" gerçekleştirir - href'teki URL'yi takip eder.

Bu arada, etkinlik delegasyonu kullanmak, menümüzü esnek hale getirir. İç içe geçmiş listeler ekleyebilir ve CSS kullanarak "kayabilir" stil oluşturabiliriz.

Diğer tarayıcı işlemleri


Birçok varsayılan tarayıcı eylemi vardır:

Bir tarayıcı işlemini tetikleyen bazı olay örnekleri şunlardır:

Olayları yalnızca JavaScript ile ele almak istersek tüm varsayılan eylemler engellenebilir.

Diğer olayları önleme


Olayların bazısı birbirlerine akış olur. İlk olayı önlersek, ikinci bir olay olmayacaktır.

Örneğin, <input> giriş alanında MouseDown tıklatıldığında odaklanma içinde olmasına neden olur.

Aşağıdaki ilk <input> 'a tıklamayı deneyin - odaklanma olayı olur. Bu normal. Ancak, ikinciyi tıklarsanız odaklama yoktur.

<input value="Focus works" onfocus="this.value=''">

<input onmousedown="return false" onfocus="this.value=''" value="Click me">

ÇIKTI:



Bunun nedeni, standart eylem için OnMouseDown iptal edilir. İkinci input'a giriş için başka bir yol kullanırsak odaklanma hala mümkündür. Öte yandan, ikinci <input>' a Artık mouse tıklamasıyla değil. Tab tuşuna basarak gidebilirsiniz ve odaklanma çalışacaktır.

Tarayacı işlemini iptal etmek kabarcıklanma (bubbling) iptal etmez


İkisini de iptal etmek istiyorsanız:

function stop(e) {

  if (e.preventDefault) { // standart
  
    e.preventDefault();
	
    e.stopPropagation();
	
  } else {    // IE8
  
    e.returnValue = false;
	
    e.cancelBubble = true;
  }
}

ÖZET :


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7720

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.