Saya ingin menjalankan fungsi JavaScript sederhana pada klik tanpa pengalihan.

Apakah ada perbedaan atau manfaat antara menempatkan panggilan JavaScript dalam hrefatribut (seperti ini:

<a href="javascript:my_function();window.print();">....</a>

) vs. menempatkannya di onclickatribut (mengikatnya ke onclickacara)?

Meletakkan onclick di dalam href akan menyinggung orang-orang yang sangat percaya pada pemisahan konten dari perilaku / tindakan. Argumennya adalah bahwa konten html Anda harus tetap fokus hanya pada konten, bukan pada presentasi atau perilaku.

Path khas hari ini adalah menggunakan pustaka javascript (mis. Jquery) dan membuat event handler menggunakan pustaka itu. Itu akan terlihat seperti:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

buruk:

<a id="myLink" href="javascript:MyFunction();">link text</a>

baik:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

lebih baik:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

bahkan lebih baik 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

bahkan lebih baik 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Mengapa lebih baik karena return falseakan mencegah browser mengikuti tautan

terbaik:

Gunakan jQuery atau kerangka kerja serupa lainnya untuk melampirkan handler onclick dengan ID elemen.

$('#myLink').click(function(){ MyFunction(); return false; });

Dalam hal javascript , satu perbedaan adalah bahwa thiskata kunci dalam onclickhandler akan merujuk ke elemen DOM yang onclickatributnya adalah (dalam hal ini <a>elemen), sedangkan thisdalam hrefatribut akan merujuk ke windowobjek.

Dalam hal penyajian , jika suatu hrefatribut tidak ada dari tautan (yaitu <a onclick="[...]">) maka, secara default, browser akan menampilkan textkursor (dan bukan kursor yang sering diinginkan pointer) karena itu memperlakukan <a>sebagai jangkar, dan bukan tautan.

Dalam hal perilaku , saat menentukan tindakan melalui navigasi href, browser biasanya akan mendukung pembukaan hrefdi jendela terpisah menggunakan pintasan atau menu konteks. Ini tidak mungkin ketika menentukan tindakan hanya melalui onclick.

Namun, jika Anda bertanya apa cara terbaik untuk mendapatkan tindakan dinamis dari klik objek DOM, maka melampirkan acara menggunakan javascript terpisah dari konten dokumen adalah cara terbaik untuk melakukannya. Anda bisa melakukan ini dengan beberapa cara. Cara yang umum adalah dengan menggunakan pustaka javascript seperti jQuery untuk mengikat suatu peristiwa:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

saya menggunakan

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Jauh tetapi itu menyelesaikan pekerjaan. gunakan gaya A untuk menyederhanakan kemudian menjadi:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Selain semua yang ada di sini, href ditampilkan pada bilah status browser, dan onclick tidak. Saya pikir itu tidak ramah pengguna untuk menampilkan kode javascript di sana.

cara terbaik untuk melakukan ini adalah dengan:

<a href="#" onclick="someFunction(e)"></a>

Masalahnya adalah bahwa ini AKAN menambahkan hash (#) ke akhir halaman URL di browser, sehingga mengharuskan pengguna untuk mengklik tombol kembali dua kali untuk pergi ke halaman sebelum Anda. Mempertimbangkan hal ini, Anda perlu menambahkan beberapa kode untuk menghentikan propagasi acara. Kebanyakan toolkit javascript sudah memiliki fungsi untuk ini. Sebagai contoh, dojo toolkit digunakan

dojo.stopEvent(event);

untuk melakukannya.

Jawaban teratas adalah praktik yang sangat buruk, orang seharusnya tidak pernah menghubungkan ke hash kosong karena dapat membuat masalah di jalan.

Yang terbaik adalah untuk mengikat pengendali acara ke elemen seperti banyak orang lain telah menyatakan, bagaimanapun, <a href="javascript:doStuff();">do stuff</a>berfungsi dengan baik di setiap browser modern, dan saya menggunakannya secara luas ketika rendering templat untuk menghindari keharusan rebind untuk setiap contoh. Dalam beberapa kasus, pendekatan ini menawarkan kinerja yang lebih baik. YMMV

Lain tid-bit menarik ....

onclick& hrefmemiliki perilaku berbeda saat memanggil javascript secara langsung.

onclickakan melewati thiskonteks dengan benar, sedangkan hreftidak akan, atau dengan kata lain <a href="javascript:doStuff(this)">no context</a>tidak akan berfungsi, sedangkan <a onclick="javascript:doStuff(this)">no context</a>akan.

Ya, saya menghapus href. Meskipun itu tidak mengikuti spesifikasi, itu akan bekerja di semua browser, meskipun, idealnya harus mencakup href="javascript:void(0);"ukuran yang baik

Memiliki javascript:atribut apa pun yang tidak khusus untuk skrip adalah metode HTML yang sudah ketinggalan zaman. Meskipun secara teknis berfungsi, Anda masih menetapkan properti javascript ke atribut non-skrip, yang bukan praktik yang baik. Ia bahkan dapat gagal di browser lama, atau bahkan yang modern (posting forum yang di-google tampaknya mengindikasikan bahwa Opera tidak menyukai 'javascript:' url).

Praktik yang lebih baik akan menjadi cara kedua, untuk menempatkan javascript Anda ke dalam onclickatribut, yang diabaikan jika tidak ada fungsi skrip yang tersedia. Tempatkan URL yang valid di bidang href (biasanya '#') untuk mundur bagi mereka yang tidak memiliki javascript.

ini bekerja untuk saya menggunakan baris kode ini:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Ini bekerja

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Secara pribadi, saya menemukan menempatkan panggilan javascript di tag HREF mengganggu. Saya biasanya tidak benar-benar memperhatikan apakah ada sesuatu yang merupakan tautan javascript atau tidak, dan sering kali ingin membuka sesuatu di jendela baru. Ketika saya mencoba melakukan ini dengan salah satu dari jenis tautan ini, saya mendapatkan halaman kosong tanpa apa-apa di atasnya dan javascript di bilah lokasi saya. Namun, ini sedikit dikesampingkan dengan menggunakan onlick.

Satu hal lagi yang saya perhatikan ketika menggunakan "href" dengan javascript:

Script dalam atribut "href" tidak akan dieksekusi jika perbedaan waktu antara 2 klik cukup singkat.

Misalnya, coba jalankan contoh berikut dan klik dua kali (cepat!) Pada setiap tautan. Tautan pertama akan dieksekusi hanya sekali. Tautan kedua akan dieksekusi dua kali.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Diproduksi ulang di Chrome (klik dua kali) dan IE11 (dengan klik tiga kali). Di Chrome jika Anda mengklik cukup cepat, Anda dapat membuat 10 klik dan hanya memiliki 1 fungsi eksekusi.

Firefox berfungsi dengan baik.

Pertama, memiliki url hrefyang terbaik karena memungkinkan pengguna untuk menyalin tautan, buka di tab lain, dll.

Dalam beberapa kasus (misalnya situs dengan perubahan HTML yang sering) tidak praktis untuk mengikat tautan setiap kali ada pembaruan.

Metode Ikatan Khas

Tautan normal:

<a href="https://www.google.com/">Google<a/>

Dan sesuatu seperti ini untuk JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

Manfaat dari metode ini adalah pemisahan markup dan perilaku yang bersih dan tidak harus mengulangi panggilan fungsi di setiap tautan.

Tidak Ada Metode Bind

Namun, jika Anda tidak ingin mengikat setiap kali, Anda dapat menggunakan onclick dan meneruskan elemen dan acara, misalnya:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

Dan ini untuk JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

Manfaat dari metode ini adalah Anda dapat memuat tautan baru (mis. Via AJAX) kapan pun Anda inginkan tanpa harus khawatir tentang pengikatan setiap saat.

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Saya mengalami bahwa javascript: hrefs tidak berfungsi ketika halaman disematkan dalam fitur halaman web Outlook di mana folder mail diatur untuk sebagai gantinya menunjukkan url