Bagaimana cara menampilkan dialog konfirmasi saat mengklik tautan <a>?

Saya ingin tautan ini memiliki dialog JavaScript yang menanyakan pengguna " Apakah Anda yakin? Y / T ”.

<a href="delete.php?id=22">Link</a>

Jika pengguna mengklik "Ya", tautan akan dimuat, jika "Tidak" tidak ada yang terjadi.

Saya tahu bagaimana melakukannya dalam bentuk, menggunakan onclickmenjalankan fungsi yang mengembalikan trueatau false. Tetapi bagaimana saya melakukan ini dengan <a>tautan?

Penangan event sebaris

Dengan cara yang paling sederhana, Anda dapat menggunakan confirm()fungsi ini dalam onclickpenangan inline .

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

Penanganan acara tingkat lanjut

Tetapi biasanya Anda ingin memisahkan HTML dan Javascript Anda , jadi saya sarankan Anda tidak menggunakan penangan event inline, tetapi letakkan kelas di tautan Anda dan tambahkan pendengar acara ke situ.

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

Contoh ini hanya akan berfungsi di browser modern (untuk IE yang lebih lama Anda dapat menggunakan attachEvent(), returnValuedan memberikan implementasi getElementsByClassName()atau menggunakan perpustakaan seperti jQuery yang akan membantu masalah lintas-browser). Anda dapat membaca lebih lanjut tentang metode penanganan peristiwa lanjut ini di MDN .

jQuery

Saya ingin tinggal jauh dari dianggap sebagai fanboy jQuery, tetapi manipulasi DOM dan penanganan acara adalah dua bidang yang paling membantu perbedaan browser. Hanya untuk bersenang-senang, berikut ini tampilannya dengan jQuery :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>

Saya sarankan menghindari JavaScript sebaris:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

Demo JS Fiddle .

Di atas diperbarui untuk mengurangi ruang, meskipun mempertahankan kejelasan / fungsi:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

Demo JS Fiddle .

Pembaruan yang agak terlambat, untuk digunakan addEventListener()(seperti yang disarankan, oleh bažmegakapa , dalam komentar di bawah):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

Demo JS Fiddle .

Di atas mengikat fungsi untuk acara setiap tautan individu; yang berpotensi sangat boros, ketika Anda bisa mengikat penanganan acara (menggunakan delegasi) ke elemen leluhur, seperti berikut ini:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

Demo JS Fiddle .

Karena penanganan peristiwa melekat pada bodyelemen, yang biasanya berisi sejumlah elemen lain yang dapat diklik, saya telah menggunakan fungsi sementara ( actionToFunction) untuk menentukan apa yang harus dilakukan dengan klik itu. Jika elemen diklik adalah link, dan karena itu memiliki tagNamedari a, klik-penanganan dilewatkan ke reallySure()fungsi.

Referensi:

• addEventListener().
• Operator bersyarat ('ternary') .
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

Anda juga dapat mencoba ini:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

jAplus

Anda dapat melakukannya, tanpa menulis kode JavaScript

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

Halaman demo

Metode ini sedikit berbeda dari salah satu jawaban di atas jika Anda melampirkan pengendali acara menggunakan addEventListener (atau attachEvent).

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

Anda dapat melampirkan penangan ini dengan:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

Atau untuk versi internet explorer yang lebih lama:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);

Hanya untuk bersenang-senang, saya akan menggunakan satu acara di seluruh dokumen daripada menambahkan acara ke semua tag anchor:

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

Metode ini akan lebih efisien jika Anda memiliki banyak anchor tag. Tentu saja, itu menjadi lebih efisien ketika Anda menambahkan acara ini ke wadah yang memiliki semua tag jangkar.

Sebagian besar browser tidak menampilkan pesan khusus yang diteruskan ke confirm().

Dengan metode ini, Anda dapat menampilkan sembulan dengan pesan khusus jika pengguna Anda mengubah nilainya <input> bidang .

Anda dapat menerapkan ini hanya untuk beberapa tautan , atau bahkan elemen HTML lainnya di halaman Anda. Cukup tambahkan kelas khusus ke semua tautan yang perlu konfirmasi dan terapkan, gunakan kode berikut:

$(document).ready(function() {
  let unsaved = false;
  // detect changes in all input fields and set the 'unsaved' flag
  $(":input").change(() => unsaved = true);
  // trigger popup on click
  $('.dangerous-link').click(function() {
    if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
      return; // user didn't confirm
    }
    // either there are no unsaved changes or the user confirmed
    window.location.href = $(this).data('destination');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
    Launch nuke!
</a>

Coba ubah nilai input pada contoh untuk mendapatkan pratinjau cara kerjanya.

MENGGUNAKAN PHP, HTML DAN JAVASCRIPT untuk meminta

Hanya jika seseorang mencari menggunakan php, html dan javascript dalam satu file, jawaban di bawah ini berfungsi untuk saya .. saya dilampirkan dengan ikon bootstrap "trash" untuk tautan tersebut.

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

alasan saya menggunakan kode php di tengah adalah karena saya tidak dapat menggunakannya dari awal ..

kode di bawah ini tidak berfungsi untuk saya: -

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

dan saya memodifikasinya seperti pada kode 1 maka saya menjalankan apa yang saya butuhkan .. Saya harap saya dapat membantu seseorang menemukan kasus saya.