HTML bağlantı bağlantısı - href ve onclick her ikisini de?

93

Bazı JavaScript'i çalıştıran ve ardından onu nereye götürürse götürsün devam eden bir bağlantı etiketi yazmak istiyorum href. Benim JavaScript ve ardından setleri yürütür bir fonksiyonu çağıran window.locationveya top.locationhiç hrefbir yerde benim için çalışmaz.

Öyleyse, sayfada "Foo" kimliğine sahip bir öğem olduğunu hayal edin. Şuna benzer bir çapa yazmak istiyorum:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

Bu tıklandığında, runMyFunction'ı çalıştırmak ve ardından sayfayı şuraya atlamak istiyorum #Foo(yeniden yüklemeye neden top.locationolmaz - kullanmak sayfanın yeniden yüklenmesine neden olur).

Öneriler? Burada yardımcı olabilirse jQuery'yi kullanmaktan mutluluk duyuyorum ...

— psikotik
kaynak

return true;çözüm, ancak arayabilirsin location.hash = '#Foo'. Sayfayı yeniden yüklemeyecek.

— shuangwhywhy

135

Bunun return trueyerine mi?

onClickKodun dönüş değeri , bağlantının kendiliğinden tıklanan eyleminin işlenip işlenmediğini belirleyen şeydir - geri dönmek, işlenmediği falseanlamına gelir, ancak geri dönerseniz true, tarayıcı işleviniz döndükten sonra işlemeye devam edecek ve uygun yere gidecektir. Çapa.

— Kehribar
kaynak

1

Ya onclick hiçbir şey döndürmezse?

— maciek

1

@maciek daha sonra, undefinedbu amaçlar için yanlış kabul edilen dönüş değeri olarak değerlendirilir.

— Amber

1

Geçmişte, yeni bir sayfa başlatmak için js işlevini kullandığımda ve href özniteliği için yalnızca bir "#" koysam, varsayılan eylemi önlemek için "-1" döndürürdüm, bu genellikle tarayıcının atlamasıdır Sayfanın en üstüne kadar, ya da bazen hiçbir şey döndürmezdim. Son zamanlarda @Amber'ın önerdiği gibi tüm bu sayfaları gözden geçirmek zorunda kaldım ... eğer sayfanın atlamasını istemiyorsam özellikle yanlış döndürmek için.

— Randy

2

@Amber, onclick hiçbir şey döndürmezse, bağlantının kendine özgü tıklanan eylemi işlenecek gibi görünüyor.

— iplus26

Ayrıca tıklama olay işleyicisinde event.preventDefault () kullanmamalısınız.

— Ruben

36

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

ve

function runMyFunction() {
  //code
  return true;
}

Bu şekilde işlevinizi çalıştırırsınız VE bağlantıyı takip edersiniz VE bağlantıyı tam olarak işleviniz başarıyla çalıştırıldıktan sonra takip edersiniz.

— n1313
kaynak

1

Ertelenmiş bir işlev çağrısından sonra işleviniz true döndürürse çalışmıyor gibi görünüyor?

— DavidVdd

7

Bağlantının konumu yalnızca çalıştırılan işlev başarılı olursa değiştirmesi gerekiyorsa onclick="return runMyFunction();", yapın ve işlevde doğru veya yanlış döndürürsünüz.

Yalnızca işlevi çalıştırmak ve ardından bağlantı etiketinin işini yapmasına izin vermek istiyorsanız, return falseifadeyi kaldırmanız yeterlidir .

Bir yan not olarak, bunun yerine muhtemelen bir olay işleyicisi kullanmalısınız, çünkü satır içi JS, işleri yapmanın en uygun yolu değildir.

— Peirix
kaynak

0

Temiz bir HTML Yapısı yaparken bunu kullanabilirsiniz.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>

Snippet'i genişlet

— Carl James Omandam
kaynak