Apa efek dari menambahkan 'kembali salah' ke pendengar acara klik?


359

Sering kali saya melihat tautan seperti ini di halaman HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Apa efek return falsedi sana?

Juga, saya biasanya tidak melihat itu di tombol.

Apakah ini ditentukan di mana saja? Dalam beberapa spec di w3.org?


5
Dan masalah praktis dalam contoh leonel adalah bahwa jika halaman saat ini digulirkan ke bawah beberapa cara itu akan melompat ke atas tanpa hasil yang salah;
roenving

IntelliJ saya mengeluh pada "return false;" dengan pesan "outside function definition"
ses

Jawaban:


310

Nilai kembalinya event handler menentukan apakah perilaku browser default juga harus terjadi. Dalam hal mengklik tautan, ini akan mengikuti tautan, tetapi perbedaannya paling terlihat pada formulir yang menangani penangan, di mana Anda dapat membatalkan pengiriman formulir jika pengguna melakukan kesalahan dalam memasukkan informasi.

Saya tidak percaya ada spesifikasi W3C untuk ini. Semua antarmuka JavaScript kuno seperti ini telah diberi julukan "DOM 0", dan sebagian besar tidak ditentukan. Anda mungkin beruntung membaca dokumentasi Netscape 2 lama.

Cara modern untuk mencapai efek ini adalah dengan menelepon event.preventDefault(), dan ini ditentukan dalam spesifikasi DOM 2 Acara .


41
event.preventDefault ? event.preventDefault() : event.returnValue = false;akan bekerja di IE juga

3
Setiap browser kecuali Chrome bekerja dengan return falsemetode ini, tetapi saya perlu event.preventDefaultuntuk Chrome.
DOOManiac

3
Chrome bekerja dengan return falsemetode sekarang. Itu berhenti mengikuti tautan dalam peristiwa onclick elemen img.
Bao

Dalam bentuk JS form, kirim handler yang mengembalikan false tidak berfungsi (setidaknya di Chrome) jadi saya menggunakan e.preventDefault (). menurut komentar @ 2astalavista di atas, e.preventDefault gagal di IE, jadi gunakan metodenya: event.preventDefault? event.preventDefault (): event.returnValue = false;
luigi7up

162

Anda dapat melihat perbedaannya dengan contoh berikut:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Mengklik "Oke" mengembalikan true, dan tautannya diikuti. Mengklik "Batal" menghasilkan false dan tidak mengikuti tautan. Jika javascript dinonaktifkan, tautan diikuti secara normal.


7
Persis apa yang saya cari, berfungsi juga sempurna pada tombol kirim! <button type="submit" onclick="return confirm('Do you really want to delete this?');">Delete</button>
ArendE

27

Berikut ini adalah rutinitas yang lebih kuat untuk membatalkan perilaku default dan peristiwa yang muncul di semua browser:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Contoh bagaimana ini akan digunakan dalam event handler:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

Shim itu bagus, tapi apa manfaat praktisnya return false;? Jawaban kamesh berkaitan dengan ini sedikit, tetapi karena ada kemungkinan shim Anda melakukan satu atau yang lain, bagaimana hasil yang terpisah akan melakukan tabstripLinkElement_clickoperasi perubahan dari browser ke browser? Jika tidak ada perbedaan operasional, mengapa (dalam praktiknya) repot (walaupun, secara teori, ini adalah Hal yang Benar untuk dilakukan)? Terima kasih, dan AIA untuk pertanyaan jawaban zombie.
ruffin

7
Blok kode pertama memiliki trailing else. Gaya pengkodean yang mengerikan. Tambahkan beberapa kurung kurawal agar tidak ambigu.
mbomb007

23

APA "return false" YANG BENAR-BENAR MELAKUKAN?

return false sebenarnya melakukan tiga hal yang sangat terpisah ketika Anda menyebutnya:

  1. event.preventDefault ();
  2. event.stopPropagation ();
  3. Menghentikan eksekusi panggilan balik dan segera kembali saat dipanggil.

Lihat jquery-events-stop-misusing-return-false untuk informasi lebih lanjut.

Sebagai contoh :

saat mengklik tautan ini, return false akan membatalkan perilaku default browser .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

7
onclick = "return false" tidak sama dengan return false dari pengendali event klik jQuery. Browser hanya mencegah penangan default (mis. e.preventDefault()) Tetapi tidak menghentikan propagasi. Lihat: jsfiddle.net/18yq1783
Jamie Treworgy

1
Namun, tautan ke blog rusak atm. Sebuah arsip di sini .
ruffin

16

Memotong kembali salah dari acara JavaScript biasanya membatalkan perilaku "default" - dalam kasus tautan, ini memberi tahu peramban untuk tidak mengikuti tautan.


5
"biasanya"? jadi tidak selalu?
Maria Ines Parnisari

12

Saya percaya itu menyebabkan peristiwa standar tidak terjadi.

Dalam contoh Anda, browser tidak akan mencoba masuk ke #.


12

Return false akan menghentikan hyperlink yang diikuti setelah javascript berjalan. Ini berguna untuk javascript tidak mencolok yang menurun dengan anggun - misalnya, Anda dapat memiliki gambar mini yang menggunakan javascript untuk membuka sembulan gambar berukuran penuh. Ketika javascript dimatikan atau gambar diklik tengah (dibuka di tab baru) ini mengabaikan acara onClick dan hanya membuka gambar sebagai gambar berukuran penuh secara normal.

Jika return false tidak ditentukan, gambar akan meluncurkan pop-up dan membuka gambar secara normal. Beberapa orang alih-alih menggunakan return false menggunakan javascript sebagai atribut href, tetapi ini berarti bahwa ketika javascript dinonaktifkan, tautan tidak akan melakukan apa-apa.


7

menggunakan return false dalam acara onclick menghentikan browser dari memproses sisa tumpukan eksekusi, yang mencakup mengikuti tautan dalam atribut href.

Dengan kata lain, menambahkan return false menghentikan href dari bekerja. Dalam contoh Anda, inilah yang Anda inginkan.

Di tombol, itu tidak perlu karena hanya itu yang akan dieksekusi onclick - tidak ada href untuk diproses dan pergi ke.


6

Return false mengatakan tidak mengambil tindakan default, yang dalam hal ini <a href>adalah untuk mengikuti tautan. Ketika Anda mengembalikan false ke onclick, maka href akan diabaikan.



3

Return false akan mencegah navigasi. Jika tidak, lokasi akan menjadi nilai balik dari someFunc


tidak, lokasi akan menjadi isi dari atribut href
Chris Marasti-Georg

Lokasi hanya menjadi nilai pengembalian someFunc jika href = "javascript: someFunc ()", ini bukan kasus untuk penangan acara.
Jim

3

The return falsemencegah halaman dari yang dinavigasi dan bergulir yang tidak diinginkan dari jendela ke atas atau bawah.

onclick="return false"

3

Saya terkejut bahwa tidak ada yang disebutkan onmousedownbukan onclick. Itu

onclick='return false'

tidak menangkap perilaku default peramban yang mengakibatkan pemilihan teks (terkadang tidak diinginkan) terjadi mousedowntetapi

onmousedown='return false'

tidak.

Dengan kata lain, ketika saya mengklik suatu tombol, teksnya kadang-kadang secara tidak sengaja dipilih untuk mengubah tampilan tombol, yang mungkin tidak diinginkan. Itu adalah perilaku default yang kami coba cegah di sini. Namun, mousedownacara tersebut telah didaftarkan sebelumnya click, jadi jika Anda hanya mencegah perilaku itu di dalam clickhandler Anda , itu tidak akan mempengaruhi pilihan yang tidak diinginkan yang timbul dari mousedownacara tersebut. Jadi teks masih akan dipilih. Namun, mencegah default untukmousedown acara tersebut akan melakukan pekerjaan.

Lihat juga event.preventDefault () vs. return false


@ FrederikKrautwald Anda benar, itu samar dan saya seharusnya mengatakan 'memilih' bukan 'menandai'. Saya sudah mencoba menulisnya lebih jelas, semoga lebih masuk akal.
Dmitri Zaitsev

0

Saya memiliki tautan ini di halaman HTML saya:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

Fungsi setBodyHtml () didefinisikan sebagai:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Ketika saya mengklik tautan, tautan itu menghilang dan teks yang ditampilkan di peramban berubah menjadi "konten baru".

Tetapi jika saya menghapus "false" dari tautan saya, mengklik tautan itu tidak (sepertinya) tidak berarti apa-apa. Mengapa demikian?

Itu karena jika saya tidak mengembalikan false, perilaku default mengklik tautan dan menampilkan halaman targetnya terjadi, tidak dibatalkan. TETAPI, di sini href dari hyperlink adalah "" sehingga tautan kembali ke halaman SAMA saat ini. Jadi halaman itu secara efektif hanya di-refresh dan sepertinya tidak terjadi apa-apa.

Di latar belakang fungsi setBodyHtml () masih dieksekusi. Ini memberikan argumennya ke body.innerHTML. Tetapi karena halaman tersebut segera di-refresh / dimuat ulang, isi tubuh yang dimodifikasi tidak tetap terlihat selama lebih dari beberapa milidetik mungkin, jadi saya tidak akan melihatnya.

Contoh ini menunjukkan mengapa terkadang BERMANFAAT untuk menggunakan "return false".

Saya ingin menetapkan BEBERAPA href ke tautan, sehingga ditampilkan sebagai tautan, seperti teks yang digarisbawahi. Tapi saya tidak ingin klik ke tautan secara efektif hanya memuat ulang halaman. Saya ingin navigasi standar = perilaku dibatalkan dan efek samping apa pun yang disebabkan oleh pemanggilan fungsi saya untuk mengambil dan tetap berlaku. Karena itu saya harus "mengembalikan salah".

Contoh di atas adalah sesuatu yang akan Anda coba dengan cepat selama pengembangan. Untuk produksi, Anda akan lebih cenderung menetapkan penangan-klik dalam JavaScript dan panggil preventDefault () sebagai gantinya. Tetapi untuk percobaan cepat, "return false" di atas akan berhasil.


0

Saat menggunakan formulir , kita dapat menggunakan 'return false' untuk mencegah pengiriman.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.