Tautan jangkar HTML - href dan onclick keduanya?

93

Saya ingin membuat sebuah tag anchor yang mengeksekusi beberapa JavaScript dan kemudian melanjutkan ke mana hrefpun mengambilnya. Memanggil fungsi yang menjalankan JavaScript saya dan kemudian menyetel window.locationatau top.locationke hreflokasi tidak berfungsi untuk saya.

Jadi, bayangkan saya memiliki elemen dengan id "Foo" di halaman. Saya ingin menulis jangkar yang mirip dengan:

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

Ketika ini diklik, saya ingin menjalankan runMyFunction dan kemudian melompat halaman ke #Foo(tidak menyebabkan reload - menggunakan top.locationakan menyebabkannya memuat ulang halaman).

Saran? Saya senang menggunakan jQuery jika dapat membantu di sini ...

— psikotik
sumber

return true;adalah solusinya, tetapi Anda juga dapat menelepon location.hash = '#Foo'. Ini tidak akan memuat ulang halaman.

— shuangwhywhy

133

Hanya return truesaja?

Nilai yang dikembalikan dari onClickkode inilah yang menentukan apakah tindakan yang diklik yang melekat pada tautan diproses atau tidak - mengembalikan falseberarti tidak diproses, tetapi jika Anda kembali true, browser akan melanjutkan untuk memprosesnya setelah fungsi Anda kembali dan menuju ke yang tepat jangkar.

— Amber
sumber

1

Bagaimana jika onclick tidak mengembalikan apa pun?

— maciek

1

@maciek maka nilai kembalian akan diperlakukan seperti undefinedyang dianggap salah untuk tujuan ini.

— Amber

1

Di masa lalu setiap kali saya menggunakan fungsi js untuk meluncurkan halaman baru, dan hanya menambahkan "#" untuk atribut href, saya akan mengembalikan "-1" untuk mencegah tindakan default, yang biasanya browser melompat di bagian atas halaman, atau terkadang saya tidak mengembalikan apa pun. Akhir-akhir ini saya harus merevisi semua halaman itu seperti yang disarankan @Amber ... untuk secara khusus mengembalikan false, jika saya tidak ingin halaman tersebut melompat.

— Randy

1

@Amber sepertinya jika onclick tidak mengembalikan apa pun, tindakan yang diklik dari tautan yang melekat akan diproses.

— iplus26

Anda juga tidak boleh menggunakan event.preventDefault () pada click event handler.

— Ruben

36

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

dan

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

Dengan cara ini Anda akan menjalankan fungsi Anda DAN Anda akan mengikuti tautannya DAN Anda akan mengikuti tautan tepat setelah fungsi Anda berhasil dijalankan.

— n1313
sumber

1

Sepertinya tidak berfungsi jika fungsi Anda mengembalikan nilai true setelah panggilan fungsi ditangguhkan?

— DavidVdd

7

Jika tautan hanya mengubah lokasi jika fungsi berjalan berhasil, lakukan onclick="return runMyFunction();"dan dalam fungsi Anda akan mengembalikan benar atau salah.

Jika Anda hanya ingin menjalankan fungsi, lalu membiarkan tag anchor melakukan tugasnya, cukup hapus return falsepernyataan tersebut.

Sebagai catatan tambahan, Anda mungkin sebaiknya menggunakan event handler sebagai gantinya, karena inline JS bukanlah cara yang sangat optimal untuk melakukan sesuatu.

— peirix.dll
sumber

0

Saat melakukan Struktur HTML yang bersih, Anda dapat menggunakan ini.

//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>

Luaskan cuplikan

— Carl James Omandam
sumber