jQuery DIV tıklama, çapa ile

Question

tıklama mümkün div'leri yapmak için yapmam:

<div class="clickable" url="http://google.com"> 
    blah blah 
</div> 

ve sonra

$("div.clickable").click(
function() 
{ 
    window.location = $(this).attr("url"); 
}); 

bu en iyi yol olup olmadığını bilmiyorum, ama işe yarıyor tek bir sorun dışında, benimle mükemmel bir şekilde: Eğer div, < ve href = "..." > gibi bir tıklatılabilir öğe içeriyorsa ve kullanıcı köprüyü tıklatırsa, hem köprü hem de div'in tıklanabilir

olarak adlandırıldı

Bu özellikle, anchor etiketinin AJAX işlevini yürüten bir AJAX işlevine başvurduğu, AND div 'url' özelliğindeki bağlantıyı izlediği için özellikle bir sorundur.

Bunun etrafında ne var?

Answer 1

İşlevinizden "false" döndürürseniz, olay köpürmeyi durdurur, böylece yalnızca ilk olay işleyiciniz tetiklenir (yani, bağlantınız tıklamayı görmez).

$("div.clickable").click(
function() 
{ 
    window.location = $(this).attr("url"); 
    return false; 
}); 

preventDefault vs yanlış dönüş ayrıntılar için event.preventDefault() vs. return false bakınız.

Answer 2

$("div.clickable").click( function(event) { window.location = $(this).attr("url"); event.preventDefault(); });

Answer 3

senin bir href bunu değiştirmek olsaydı yapardım biliyor:

 
$("a#link1").click(function(event) { 
    event.preventDefault(); 
    $('div.link1').show(); 
    //whatever else you want to do 
}); 

böylece div ile tutmak istiyorsanız, ben

çalışacaktı

 
$("div.clickable").click(function(event) { 
    event.preventDefault(); 
    window.location = $(this).attr("url"); 
}); 

Answer 4

Özel bir url özelliği kullanmak HTML'yi geçersiz kılar. Bu büyük bir sorun olmasa da, verilen örneklere erişilebilir değildir. JavaScript gezinme için değil, JavaScript kapalı olduğunda (veya başka bir komut dosyası tarafından engellenmediğinde). Google, en azından bu yolla değil, belirtilen URL'de bulunan sayfayı bulamaz.

Bunu erişilebilir hale getirmek oldukça kolaydır. Yalnızca, div içinde URL'ye işaret eden düzenli bir bağlantı olduğundan emin olun. JavaScript/jQuery'yi kullanarak, bağlantının href özniteliği tarafından belirtilen konuma yönlendiren div'e bir onclick ekleyin. Artık, JavaScript çalışmadığında, bağlantı hala devam ediyor ve gezinmek için klavyeyi kullanırken (ve özel niteliklere ihtiyacınız yok, bu nedenle HTML'niz geçerli olabilir) odağı bile yakalayabilir.

---

Bir süre önce bunu yapan bir jQuery eklentisi yazdım. Ayrıca sınıf adlarını div'a (veya tıklanabilir yapmak istediğiniz herhangi bir öğeye) ve bağlantıya, div gerçekten tıklanabilir olduğunda CSS ile görünümünü değiştirebilmenizi sağlar. Vurgulu ve odak stillerini belirtmek için kullanabileceğiniz classNames bile ekler. sizin durumunuzda + belgeleri indirerek için $("div.clickable).clickable();

olacağını eklentinin sayfasına bakın:

yapmanız gereken tek şey tıklanabilir yapıp onların tıklanabilir() yöntemini çağırmak istediğiniz öğeyi (ler) belirtmek olduğunu jQuery: clickable — jLix