Bagaimana mencegah klik pada tautan '#' agar tidak melompat ke atas halaman?

Saat ini saya menggunakan <a>tag dengan jQuery untuk memulai hal-hal seperti acara klik, dll.

Contohnya adalah <a href="#" class="someclass">Text</a>

Tapi aku benci bagaimana '#' membuat halaman melompat ke bagian atas halaman. Apa yang bisa saya lakukan?

Di jQuery, saat Anda menangani acara klik, return false untuk menghentikan tautan agar tidak merespons dengan cara biasamencegah tindakan default, yaitu mengunjungi hrefatribut, agar tidak terjadi (sesuai komentar PoweRoy dan jawaban Erik ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Jadi ini sudah tua tapi ... kalau-kalau ada orang yang menemukan ini dalam pencarian.

Cukup gunakan "#/"alih-alih "#"dan halaman tidak akan melompat.

Anda bahkan dapat menulisnya seperti ini:

<a href="javascript:void(0);"></a>

Saya tidak yakin ini cara yang lebih baik tetapi ini adalah jalan :)

Solusi # 1: (polos)

<a href="#!" class="someclass">Text</a>

Solusi # 2: (diperlukan javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Solusi # 3: (diperlukan jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Anda dapat menggunakannya event.preventDefault()untuk menghindari ini. Baca lebih lanjut di sini: http://api.jquery.com/event.preventDefault/ .

Gunakan saja <input type="button" />alih-alih <a>dan gunakan CSS untuk menatanya agar terlihat seperti tautan jika Anda mau.

Tombol dibuat khusus untuk mengklik, dan mereka tidak memerlukan atribut href.

Cara terbaik adalah menggunakan aksi onload untuk membuat tombol dan menambahkannya di tempat yang Anda butuhkan melalui javascript, jadi dengan javascript dinonaktifkan, mereka tidak akan ditampilkan sama sekali dan tidak membingungkan pengguna.

Ketika Anda menggunakan, href="#"Anda mendapatkan banyak tautan berbeda yang menunjuk ke lokasi yang sama, yang tidak akan berfungsi ketika agen tidak mendukung JavaScript.

Jika Anda ingin menggunakan jangkar, Anda dapat menggunakan http://api.jquery.com/event.preventDefault/ seperti jawaban lain yang disarankan.

Anda juga dapat menggunakan elemen lain seperti rentang dan melampirkan acara klik itu.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Anda dapat menggunakan #0sebagai href, karena 0tidak diizinkan sebagai id, halaman tidak akan melompat.

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Gunakan saja

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Jika elemen tidak memiliki nilai href yang berarti, maka itu sebenarnya bukan tautan, jadi mengapa tidak menggunakan beberapa elemen lain saja?

Seperti yang disarankan oleh Neothor, rentang sama tepat dan, jika ditata dengan benar, akan terlihat jelas sebagai item yang dapat diklik. Anda bahkan bisa melampirkan hover event, untuk membuat elemnt 'menyala' saat mouse pengguna bergerak di atasnya.

Namun, setelah mengatakan ini, Anda mungkin ingin memikirkan kembali desain situs Anda sehingga berfungsi tanpa javascript, tetapi ditingkatkan oleh javascript saat tersedia.

Tautan dengan href = "#" hampir selalu harus diganti dengan elemen tombol:

<button class="someclass">Text</button>

Menggunakan tautan dengan href = "#" juga merupakan masalah aksesibilitas karena tautan ini akan terlihat oleh pembaca layar, yang akan membacakan "Tautan - Teks" tetapi jika pengguna mengkliknya tidak akan pergi ke mana pun.

Anda bisa meneruskan tag anchor tanpa properti href, dan menggunakan jQuery untuk melakukan tindakan yang diperlukan:

<a class="foo">bar</a>

Saya telah menggunakan:

<a href="javascript://nop/" class="someClass">Text</a>

The #/trick bekerja, tetapi menambahkan acara sejarah untuk browser. Jadi, mengklik kembali tidak berfungsi sebagaimana yang diinginkan / diharapkan pengguna.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); adalah cara saya pergi, karena berfungsi untuk konten yang sudah ada, dan elemen apa pun yang ditambahkan ke DOM setelah dimuat.

Secara khusus, saya perlu melakukan ini di menu drop-down bootstrap di dalam .btn-group(Referensi) , jadi saya lakukan:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Dengan cara ini ditargetkan, dan tidak memengaruhi hal lain di laman.

Saya selalu menggunakan:

<a href="#?">Some text</a>

ketika mencoba untuk mencegah halaman melompat. Tidak yakin apakah ini yang terbaik, tetapi tampaknya telah bekerja dengan baik selama bertahun-tahun.

Ada 4 cara serupa untuk mencegah halaman melompat ke atas tanpa JavaScript:

Pilihan 1:

<a href="#0">Link</a>

Pilihan 2:

<a href="#!">Link</a>

Opsi 3:

<a href="#/">Link</a>

Opsi 4 ( Tidak disarankan ):

<a href="javascript:void(0);">Link</a>

Tapi lebih baik digunakan event.preventDefault()jika Anda menyerahkan acara klik di jQuery.

Anda juga dapat mengembalikan false setelah memproses jquery Anda.

Misalnya.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Saya menggunakan sesuatu seperti ini:

<a href="#null" class="someclass">Text</a>

Untuk mencegah halaman melompat, Anda perlu menelepon e.stopPropagation();setelah menelepon e.preventDefault();:

stopPropagationmencegah acara naik pohon DOM. Info lebih lanjut di sini: https://api.jquery.com/event.stoppropagation/

Jika Anda ingin bermigrasi ke Bagian Jangkar di halaman yang sama tanpa melompat halaman gunakan:

Cukup gunakan "# /" bukannya "#" misalnya

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Menambahkan sesuatu setelah #menetapkan fokus halaman ke elemen dengan ID itu. Solusi paling sederhana adalah menggunakan #/meskipun Anda menggunakan jQuery. Namun jika Anda menangani acara di jQuery, event.preventDefault()adalah cara untuk pergi.

The <a href="#!">Link</a>dan <a href="#/">Link</a>tidak berfungsi jika seseorang harus mengklik pada input yang sama lebih dari sekali .. itu hanya membutuhkan 1 kali klik event untuk masing-masing input ganda.

masih cara terbaik untuk pergi adalah dengan <a href="#">Link</a>

kemudian,

event.preventDefault();