Bir <a> bağlantısını tıkladığınızda bir onay iletişim kutusu nasıl görüntülenir?


269

Bu bağlantının kullanıcıya soran bir JavaScript iletişim kutusu olmasını istiyorum “ Emin misiniz? E / H ”.

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

Kullanıcı “Evet” i tıklatırsa, bağlantı yüklenmelidir, “Hayır” ise hiçbir şey olmaz.

Ben kullanarak formlarda bunun nasıl biliyor onclicko döner bir işlevi çalıştıran trueveya false. Ama bunu bir <a>bağlantıyla nasıl yapabilirim ?


Bu angularjs1.x'e nasıl ulaşabiliriz
Bhaskara

Yanıtlar:


597

Satır içi olay işleyici

En basit şekilde, confirm()işlevi satır içi onclickişleyicide kullanabilirsiniz.

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

Gelişmiş olay işleme

Ancak normalde HTML ve Javascript'inizi ayırmak istersiniz , bu yüzden satır içi olay işleyicileri kullanmamanızı, ancak bağlantınıza bir sınıf koymanızı ve buna bir olay dinleyicisi eklemenizi öneririm.

<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>

Bu örnek modern tarayıcılarda sadece işi (eski IE'lerin için kullanabileceğiniz olacak attachEvent(), returnValueve bir uygulama sağlamak getElementsByClassName()veya çapraz tarayıcı sorunlarında yardımcı olacak jQuery gibi bir kitaplık kullanın). MDN'deki bu gelişmiş olay işleme yöntemi hakkında daha fazla bilgi edinebilirsiniz .

jQuery

Bir jQuery fanboy olarak kabul edilmekten uzak kalmak istiyorum, ancak DOM manipülasyonu ve olay işleme, tarayıcı farklılıklarıyla en çok yardımcı olan iki alandır. Sadece eğlence için, bu jQuery ile nasıl görüneceği :

<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>

Gerçekten bu kadar kolay mıydı! Utandım mı yoksa ne! Sadece formlar üzerinde çalıştığını varsaydım. Onaylama iletişim kutusu her tıklanabilir öğe için çalışıyor mu?
Christoffer

1
@Tophe Onay iletişim kutusunun kendisinin belirli öğelerle hiçbir ilgisi yoktur.
kapa

1
Bu kadar basit bir şey için, HTML ve JavaScript'i ayırmak gerçekten gerekli mi? Bu kadar basit ve kısa bir işlevi satır içinde bırakarak hangi sorunları öngörürdünüz?
Ciaran Gallagher

5
@CiaranG Her zaman böyle başlar :), o zaman bunu ve bunu ekleyin, vb. Endişelerin ayrılmasını kucaklamayı başarırsanız, bu satır içi işleyicilerin çoğundan kurtulursanız daha temiz hissedeceksiniz. HTML'nizde yapacak hiçbir şeyleri yok. En azından bence ve en azından çoğu durumda. Her zaman özel durumlar vardır - tembellik bunlardan biri olmamalıdır.
kapa

@Ulysnep Düzenleme önerinize göre confirm(…), satır içi işleyicide noktalı virgül atlanırken bir hata oluştu . Bunu yeniden üretemedim.
user4642212

15

Satır içi JavaScript'ten kaçınmayı öneririm:

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;
        }
    };
}​

JS Fiddle demosu .

Yukarıdakiler, netliği / işlevi korurken alanı azaltmak için güncellendi:

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?");
    };
}

JS Fiddle demosu .

Kullanmak için biraz gecikmiş bir güncelleme addEventListener()( aşağıdaki yorumlarda bažmegakapa tarafından önerildiği gibi):

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);
}

JS Fiddle demosu .

Yukarıdakiler her bir bağlantının olayına bir fonksiyon bağlar; bu, olay işlemeyi (delegasyon kullanarak) aşağıdakiler gibi bir üst öğeye bağlayabildiğinizde potansiyel olarak oldukça israflıdır:

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);

JS Fiddle demosu .

Olay işleme, bodynormalde bir dizi başka tıklanabilir öğe içeren öğeye eklendiğinden actionToFunction, bu tıklama ile ne yapılacağını belirlemek için bir ara işlev ( ) kullandım. Tıklanan öğe bir bağlantıysa ve bu nedenle de bir tagNamedeğeri varsa a, tıklama işleme reallySure()işleve iletilir .

Referanslar:


Teşekkür ederim. Kısa satır içi doğrulama çözümü işe yaradı. Neden satır içi koddan kaçınmayı öneriyorsunuz? Genellikle belirgin nedenlerle satır içi CSS'den uzak duruyorum, ancak kısa javascript snippet'lerindeki nedenler nelerdir?
Christoffer

Satır içi CSS'nin tavsiye edilemez olması nedeniyle, bakımı daha zordur ve daha karışık HTML'ye yol açar ve gereksinimler değişirse güncellenmesi için aşırı miktarda çalışma gerektirir.
David, Monica'nın

Satır içi işleyicileri kullanmama noktasına katılıyorum. Ancak, işleyicilerimizi komut dosyasına yine de eklersek, gelişmiş model kullanılmalıdır ( addEventListener). +1 olsa.
kapa

@ bažmegakapa: Ben ... hemfikirim; ama itiraf etmeliyim ki henüz addEventListener()modele razı olmadım .
David, Monica'nın

Sen yerini alabilir if(check == true)ile if(check).
İsimsiz

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

5

Bunu da deneyebilirsiniz:

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

@Kapa tarafından verilen Ans çok kolay ve daha az dağınık
dipenparmar12

1

jAplus

JavaScript kodu yazmadan yapabilirsiniz

<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>

Deneme sayfası


11
Paylaştığınız için teşekkürler, ancak elbette Javascript kullanıyorsunuz, çok basit bir şeyi işlemek için bir kütüphane ekliyorsunuz. Buna değer mi? Bu kütüphaneyi bilmiyorum, başka amaçlar için de kullanırsanız, belki de ekstra yüke değer ...
Marcos Buarque

1
Bu basit şey için iki kütüphane mi?
maracuja-juice

0

AddEventListener (veya attachEvent) kullanarak olay işleyicinizi eklerseniz, bu yöntem yukarıdaki yanıtlardan birinden biraz farklıdır.

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;
  }
}

Bu işleyiciyi şunlardan biriyle ekleyebilirsiniz:

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

Veya Internet Explorer'ın eski sürümleri için:

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

Eski IE'leri önemsiyorsanız, unutmayın window.event.
kapa

0

Sadece eğlenmek için, tüm bağlantı etiketlerine etkinlik eklemek yerine belgenin tamamında tek bir etkinlik kullanacağım :

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?' );
    }
};

Birçok bağlantı etiketiniz varsa bu yöntem daha verimli olur. Tabii ki, bu olayı tüm bağlantı etiketlerine sahip kaba eklediğinizde daha da verimli hale gelir.


0

Çoğu tarayıcı, iletilen özel mesajı görüntülemez confirm().

Bu yöntemle, kullanıcınız herhangi bir <input>alanın değerini değiştirdiyse özel mesaj içeren bir açılır pencere gösterebilirsiniz .

Bunu yalnızca bazı bağlantılara , hatta sayfanızdaki diğer HTML öğelerine uygulayabilirsiniz . Onaylanması gereken tüm bağlantılara özel bir sınıf eklemeniz ve uygulamanız aşağıdaki kodu kullanmanız yeterlidir:

$(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>

Nasıl çalıştığının bir önizlemesini almak için örnekteki giriş değerini değiştirmeyi deneyin.


-2

Bilgi isteminde PHP, HTML VE JAVASCRIPT KULLANIMI

Birisi tek bir dosyada php, html ve javascript kullanmak isteyen varsa , aşağıdaki cevap benim için çalışıyor .. i bağlantı için bootstrap simgesi "çöp" kullanılan ekli.

<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>

ben php kod ortasında kullanılan nedeni ben başından beri kullanamam çünkü ..

Aşağıdaki kod benim için çalışmıyor: -

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>";

ve 1 kodunda olduğu gibi değiştirdim o zaman ben sadece ne gerek olarak çalıştırın .. Umarım bu benim durumumun inneed birine yardımcı olabilir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.