Tag HTML <a> ingin menambahkan kerja href dan onclick

123

Saya ingin bertanya tentang tag HTML

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

Cara membuat ini sebuah tag bekerja dengan href dan onClick ? (lebih suka onClick dijalankan dulu, baru href)

232

Anda sudah memiliki apa yang Anda butuhkan, dengan sedikit perubahan sintaks:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

Perilaku default dari <a>tag onclickdan hrefproperti adalah mengeksekusi onclick, lalu mengikuti hrefselama onclicktidak kembali false, membatalkan acara (atau peristiwa belum dicegah)

— Ian
sumber

Apakah ada juga cara untuk melakukan ini dengan fungsi element.addEventListener?

— TheEquah

4

Tidak berfungsi untuk saya, sampai saya meletakkannya di href="#"sana alih-alih URL asli.

— yegor256

Saya menggunakan framework laravel, jadi dalam tampilan blade saya, saya menyertakan ini, Tidak berfungsi, apakah ada yang mencoba ini dengan laravel?

— Vajira Prabuddhaka

Solusi ini tidak berfungsi jika saya memiliki metode tindakan yang disebut dalam kontroler MVC di href. Adakah yang bisa membantu?

— DharaPPatel

10

Gunakan jQuery . Anda perlu menangkap clickacara tersebut dan kemudian pergi ke situs web.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

Luaskan cuplikan

— Sudipta Chatterjee
sumber

11

saya tidak akan menggunakan kerangka javascript apa pun. tapi terima kasih atas jawaban Anda

7

Di atas bukanlah tautan yang sebenarnya. Ini tidak dapat dibuka di tab baru dan merupakan praktik yang sangat buruk. Jika sesuatu dapat dibuka di tab baru (memiliki url na) selalu tambahkan hrefatribut yang berarti .

— Nux

2

Untuk mencapai ini gunakan html berikut:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

Berikut adalah contoh kerja .

— Kamil Kiełczewski
sumber

Ini berfungsi untuk saya di Chrome namun Safari tampaknya menjalankan fungsi tetapi tidak membuka href ... ada sugestions?

— Ben

@Ben saya melakukan tes pada biola tanpa JS - hanya html murni: <a href="http://example.com" >Item</a>dan di Chrome saya melihat beberapa pesan untuk mengizinkan halaman menjalankan tautan ini (peringatan di akhir bilah url chrome). Di safari di konsol saya melihat peringatan: [diblokir] Halaman di fiddle.jshell.net/_display tidak diizinkan untuk menampilkan konten tidak aman dari example.com - jadi mungkin ini adalah masalah keamanan (hanya pada biola?)

— Kamil Kiełczewski

1

Tidak perlu jQuery.

Beberapa orang mengatakan bahwa menggunakan onclickadalah praktik yang buruk ...

Contoh ini menggunakan javascript browser murni. Secara default, penangan klik akan mengevaluasi sebelum navigasi, sehingga Anda dapat membatalkan navigasi dan melakukan sendiri jika Anda mau.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

— TeamDman
sumber

-1

Gunakan ng-clickdi tempat onclick. dan sesederhana itu:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

— mak-273
sumber

Hanya di AngularJS

— Corrodian