Akses peristiwa untuk memanggil preventdefault dari fungsi kustom yang berasal dari atribut onclick tag

119

Saya memiliki tautan seperti ini:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

Dan saya ingin melakukan preventDefault()di dalam myfunc(), karena a #akan ditambahkan di bilah alamat saat mengklik tautan (tanpa melakukan return false;atau href='javascript:void(0);')

Apakah ini mungkin? Bisakah saya mendapatkan acara di dalammyfunc()

Omu
sumber
6
Apa yang salah dengan return false?
Alex
5
itu menghentikan propagasi juga
Omu
4
return falsehanya menghentikan propagasi dalam jQuery.
cruzanmo

Jawaban:

157

Saya yakin Anda dapat masuk eventke fungsi inline yang akan menjadi eventobjek untuk acara yang diangkat di browser yang sesuai dengan W3C (yaitu versi IE yang lebih lama masih memerlukan deteksi di dalam fungsi penanganan acara Anda untuk melihatnya window.event).

Contoh cepat .

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Jalankan apa adanya dan perhatikan bahwa tautan tidak mengalihkan ke Google setelah peringatan.
  2. Kemudian, ubah yang eventditeruskan ke onclickpenangan menjadi sesuatu yang lain seperti e, klik jalankan, lalu perhatikan bahwa pengalihan terjadi setelah peringatan (panel hasil menjadi putih, mendemonstrasikan pengalihan).
Russ Cam
sumber
5
ok, saya lihat yang harus saya lakukan adalah meletakkan parameter saya keduamyfunc(event, {a:123, b:"asdas"})
Omu
1
@Omu Argumen yang diteruskan, peristiwa, dapat berada di sembarang tempat, tidak harus yang pertama, selama ia berada di tempat yang tepat dari daftar parameter yang ditentukan untuk fungsi tersebut. Misalnya, function myfunc(o, e) {...}maka dapat disebut sebagai myfunc({a:1, b:'hi'}, event).
cateyes
2
Saya pikir Anda tidak harus secara eksplisit meneruskan dan menangkap objek acara. Anda cukup merujuknya di fungsi. Bisakah seseorang mengonfirmasi? Maksud saya, kode ini tanpa acara juga harus berfungsi:function sayHi() { event.preventDefault(); alert("hi"); }
K Vij
111

Solusi paling sederhana adalah:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

Ini sebenarnya cara yang baik untuk melakukan perusakan cache untuk dokumen dengan fallback untuk browser yang tidak mendukung JS (tidak ada perusakan cache jika tidak ada JS)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

Jika JavaScript diaktifkan, itu membuka PDF dengan string kueri perusak cache, jika tidak, itu hanya membuka PDF.

JuLo
sumber
Bisa saja menggunakan teknologi sisi server untuk menulis ulang tautan itu jika perusak cache adalah semua yang Anda cari.
mpen
Akan lebih baik, tetapi saya tidak memiliki akses ke kode sisi server. Bekerja dengan apa yang saya punya.
JuLo
11

Coba ini:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>
Suave Nti
sumber
ini membutuhkan tag <script> untuk setiap kejadian klik yang membuat kode lebih rumit.
somid3
Ini juga membutuhkan jQuery, yang sementara mungkin ada seharusnya tidak menjadi prasyarat.
Irregular Shed
Juga tidak setuju di sini, Penguraian sederhana ke fungsi sebaris lebih efektif dan lebih sedikit kode.
Shannon Hochkins
1
@ somid3, sementara jQuery tidak diperlukan , jika Anda khawatir tentang kinerja, Anda dapat menggunakan event didelegasikan tunggal handler sehingga Anda hanya melampirkan pendengar tunggal untuk semua jangkar pada halaman seperti ini: $("body").on("click","a",function(e) { e.preventDefault() });. Dalam kedua kasus tersebut, tidak ada solusi yang akan berdampak signifikan pada kinerja.
KyleMit
7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>
Aram Mkrtchyan
sumber
2
Ini berlaku untuk setiap jangkar, dan akan merusak semua tautan, juga membutuhkan javascript untuk disisipkan pada halaman serta jQuery.
Shannon Hochkins
Selain itu, saat menggunakan jQuery, return falsetidak disarankan karena juga akan mencegah semua penangan acara lainnya pada elemen tersebut berjalan, dan menghentikan acara agar tidak menggelembung ke elemen yang lebih tinggi.
Stijn de Witt
6

Tambahkan kelas unik ke tautan dan javascript yang mencegah default pada tautan dengan kelas ini:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>
aaandre
sumber
Pendekatan yang menarik untuk solusi global.
AFrak
5

Bisakah Anda tidak begitu saja menghapus atribut href dari tag?

Leigh Ciechanowski
sumber
1
ya, itu juga pilihan, meskipun secara default tautan tidak akan memiliki garis bawah, dan jika javascript dimatikan tidak akan ada href untuk pergi ke
Omu
4

Saya rasa ketika kita menggunakan onClick kita ingin melakukan sesuatu yang berbeda dari default. Jadi, untuk semua tautan Anda dengan onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});
Ronan
sumber
2

Sederhana!

onclick="blabla(); return false"
Jake
sumber
2

Anda dapat mengakses acara dari onclick seperti ini:

<button onclick="yourFunc(event);">go</button>

dan pada fungsi javascript Anda, saran saya adalah menambahkan pernyataan baris pertama itu sebagai:

function yourFunc(e) {
    e = e ? e : event;
}

lalu gunakan where e sebagai variabel peristiwa

gdarcan.dll
sumber
0

e.preventDefault (); dari https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Atau telah mengembalikan false dari metode Anda.

rahul singh Chauhan
sumber
1
Bagaimana jawaban Anda berbeda dengan jawaban yang sudah disediakan?
Dimitar Spasovski
Saya diberi URL untuk kejelasan lebih lanjut tentang pertanyaan yang diajukan
rahul singh Chauhan
0

Tanpa perpustakaan JS atau jQuery. Untuk membuka jendela popup yang bagus jika memungkinkan. Gagal dengan aman ke tautan normal terbuka.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

Dan fungsi helper:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
Martin Večeřa
sumber