Katakanlah saya memiliki anchor tag seperti
<a href="#" ng-click="do()">Click</a>
Bagaimana saya bisa mencegah browser dari menavigasi ke # di AngularJS ?
angularjs
preventdefault
Micael
sumber
sumber
href
.href=''
untuk menjaga perilaku penunjuk tetikus.Jawaban:
PEMBARUAN : Sejak itu saya berubah pikiran tentang solusi ini. Setelah lebih banyak pengembangan dan waktu yang dihabiskan untuk mengerjakan ini, saya percaya solusi yang lebih baik untuk masalah ini adalah dengan melakukan hal berikut:
Dan kemudian perbarui Anda
css
untuk memiliki aturan tambahan:Jauh lebih sederhana dan menyediakan fungsionalitas yang sama persis dan jauh lebih efisien. Harapan yang mungkin bisa membantu orang lain mencari solusi ini di masa depan.
Berikut ini adalah solusi saya sebelumnya, yang saya tinggalkan di sini hanya untuk tujuan warisan:
Jika Anda sering mengalami masalah ini, arahan sederhana yang akan memperbaiki masalah ini adalah sebagai berikut:
Itu memeriksa semua tag anchor (
<a></a>
) untuk melihat apakahhref
atribut mereka adalah string kosong (""
) atau hash ('#'
) atau adang-click
tugas. Jika menemukan salah satu dari kondisi ini, ia menangkap peristiwa dan mencegah perilaku default.Satu-satunya sisi adalah menjalankan arahan ini untuk semua tag anchor. Jadi jika Anda memiliki banyak tag anchor pada halaman dan Anda hanya ingin mencegah perilaku default untuk sejumlah kecil, maka arahan ini tidak terlalu efisien. Namun, saya hampir selalu ingin
preventDefault
, jadi saya menggunakan arahan ini di seluruh aplikasi AngularJS saya.sumber
href
atribut kosong memiliki perilaku yang berbeda di berbagai browser. Meskipun saya setuju itu sejauh ini merupakan solusi terbersih dan paling efisien, ia memang memiliki beberapa masalah lintas browser. Menggunakan pendekatan direktif memungkinkan browser untuk menangani<a>
tag seperti biasanya, tetapi masih mendapatkan OP jawaban yang mereka cari.Menurut dokumen untuk ngHref Anda harus dapat meninggalkan href atau melakukan href = "".
sumber
Anda dapat mengirimkan objek $ event ke metode Anda, dan memanggilnya
$event.preventDefault()
, sehingga pemrosesan default tidak akan terjadi:sumber
$event.preventDefault()
... pajak IE.ng-click="do(); $event.preventDefault()
misalnya ... meskipun, itu tidak perlu karena jawaban @ Chris di bawah adalah yang benar. Ini mungkin membantu orang-orang dalam situasi di mana mereka telah membuat ngClicks dan mereka ingin menelepon$event.stopPropagation()
.Saya lebih suka menggunakan arahan untuk hal semacam ini. Ini sebuah contoh
Dan kode arahan untuk
eat-click
:Sekarang Anda dapat menambahkan
eat-click
atribut ke elemen apa pun dan itu akan menjadipreventDefault()
otomatis.Manfaat:
$event
objek jelek ke dalamdo()
fungsi Anda .$event
objeksumber
Error: $ is not defined
. Apa yang saya lewatkan?angular.element(element).bind('click', function(event){...});
. Itu berhasil. Ref: jQLiteMeski Renaud memberi solusi hebat
Saya pribadi menemukan Anda juga memerlukan $ event.stopPropagation () dalam beberapa kasus untuk menghindari beberapa efek samping
akan menjadi solusi saya
sumber
sumber
Solusi termudah yang saya temukan adalah yang ini:
sumber
Jadi membaca jawaban ini, @ Chris masih memiliki jawaban yang paling "benar", saya kira, tetapi memiliki satu masalah, itu tidak menunjukkan "pointer" ....
Jadi, inilah dua cara untuk mengatasi masalah ini tanpa perlu menambahkan kursor: gaya pointer:
Gunakan
javascript:void(0)
alih-alih#
:Gunakan
$event.preventDefault()
dalamng-click
arahan (sehingga Anda tidak membuang controller Anda dengan referensi terkait DOM):Secara pribadi saya lebih suka yang pertama daripada yang terakhir.
javascript:void(0)
memiliki manfaat lain yang dibahas di sini . Ada juga diskusi tentang "JavaScript tidak mencolok" di tautan yang baru-baru ini menakutkan, dan tidak serta-merta langsung berlaku untuk aplikasi bersudut.sumber
javascript:;
Anda bisa melakukannya sebagai berikut
1.Hapus
href
atribut daria
tag anchor ( )2. Atur kursor kursor dalam elemen klik css ke ng
sumber
HTML
di sini pure angularjs: dekat dengan fungsi ng-klik Anda dapat menulis fungsi preventDefault () dengan memisahkan tanda titik koma
JS
(atau)
Anda dapat melanjutkan dengan cara ini, ini sudah dibahas di sini.
HTML
JS
sumber
Coba opsi ini yang bisa saya lihat belum terdaftar di atas:
sumber
Karena Anda membuat aplikasi web, mengapa Anda perlu tautan?
Tukar jangkar Anda ke tombol!
sumber
jika masih relevan:
sumber
Cara teraman untuk menghindari peristiwa pada href adalah mendefinisikannya sebagai
sumber
Saya akan pergi dengan:
Seluruh ini mencegah hal standar telah membingungkan saya, jadi saya telah membuat JSFiddle menggambarkan kapan dan di mana Angular mencegah default .
JSFiddle menggunakan arahan Angular - jadi harus sama persis. Anda dapat melihat kode sumber di sini: kode sumber tag
Saya harap ini akan membantu klarifikasi untuk beberapa orang.
Saya ingin memposting dokumen ke ngHref tetapi saya tidak bisa karena reputasi saya.
sumber
Inilah yang selalu saya lakukan. Bekerja seperti pesona!
sumber
Atau jika Anda perlu inline maka Anda dapat melakukan ini:
sumber
Banyak jawaban tampaknya berlebihan. BAGI SAYA, ini berhasil
sumber
Saya memerlukan kehadiran nilai atribut href untuk degradasi (ketika js dimatikan), jadi saya tidak dapat menggunakan atribut href kosong (atau "#"), tetapi kode di atas tidak bekerja untuk saya, karena saya memerlukan sebuah acara ( e) variabel. Saya membuat arahan saya sendiri:
Dalam HTML:
sumber
Meminjam dari jawaban tennisgent. Saya suka Anda tidak harus membuat arahan khusus untuk menambahkan semua tautan. Namun, saya tidak bisa membuatnya bekerja di IE8. Inilah yang akhirnya bekerja untuk saya (menggunakan sudut 1.0.6).
Perhatikan bahwa 'bind' memungkinkan Anda untuk menggunakan jqLite yang disediakan oleh angular sehingga tidak perlu membungkus dengan jQuery penuh. Juga diperlukan metode stopPropogation.
sumber
dropdown
, saya ingin propagasi tetapi bukan perilaku default. Cuplikan ini TIDAK disarankan.Saya mengalami masalah yang sama ketika menggunakan jangkar untuk drop down bootstrap sudut. Satu-satunya solusi yang saya temukan yang menghindari efek samping yang tidak diinginkan (mis. Drop down tidak menutup karena menggunakan preventDefault ()) adalah menggunakan yang berikut ini:
sumber
jika Anda tidak pernah ingin pergi ke href ... Anda harus mengubah markup Anda dan menggunakan tombol bukan jangkar karena secara semantik itu bukan jangkar atau tautan. Sebaliknya jika Anda memiliki tombol yang melakukan beberapa pemeriksaan dan kemudian mengarahkan kembali itu harus menjadi tautan / tag jangkar dan bukan tombol ... untuk keperluan SEO juga pengujian [masukkan test suite di sini].
untuk tautan yang Anda hanya ingin mengarahkan kembali secara kondisional seperti meminta untuk menyimpan perubahan, atau mengakui kondisi kotor ... Anda harus menggunakan ng-klik = "someFunction ($ event)" dan di someFunction pada validasi AndaError preventDefault dan atau stopPropagation.
juga hanya karena Anda tidak dapat berarti Anda harus melakukannya . javascript: void (0) bekerja dengan baik pada hari itu ... tetapi karena peretas jahat / peramban menandai aplikasi / situs yang menggunakan javascript dalam sebuah href ... lihat tidak ada alasan untuk ducktype di atas ..
ini tahun 2016 sejak 2010 seharusnya tidak ada alasan di mana pun untuk menggunakan tautan yang bertindak seperti tombol ... jika Anda masih harus mendukung IE8 dan di bawah ini Anda perlu mengevaluasi kembali tempat bisnis Anda.
sumber
sumber
Yang harus Anda lakukan, adalah menghilangkan
href
atribut sepenuhnya.Jika Anda melihat kode sumber untuk
a
arahan elemen (yang merupakan bagian dari inti Angular), kode itu menyatakan di baris 29 - 31:Yang berarti Angular sudah menyelesaikan masalah tautan tanpa href. Satu-satunya masalah yang masih Anda miliki adalah masalah css. Anda masih dapat menerapkan gaya pointer ke jangkar yang memiliki klik-ng, misalnya:
Jadi, Anda bahkan dapat membuat situs Anda lebih mudah diakses dengan menandai tautan nyata dengan gaya yang berbeda, lalu tautan yang menjalankan fungsi.
Selamat coding!
sumber
Anda dapat menonaktifkan pengalihan url di dalam Html5Mode $ location untuk mencapai tujuan. Anda dapat mendefinisikannya di dalam kontroler spesifik yang digunakan untuk halaman tersebut. Sesuatu seperti ini:
sumber
Jika Anda menggunakan Angular 8 atau lebih, Anda dapat membuat arahan:
Pada tag jangkar Anda pada komponen Anda dapat mengirimkannya seperti ini:
Modul Aplikasi harus memiliki deklarasi:
sumber
Alternatifnya mungkin:
sumber
span
untuk tujuan mengklik. Pergi saja untuk jawaban @ tennisgent - jangkar tanpahref
ditentukan.