Как отобразить диалоговое окно подтверждения при нажатии ссылки <a>?

Ответ 1

Обработчик события Inline

В самом простом режиме вы можете использовать функцию confirm() в встроенном обработчике onclick.

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

Расширенная обработка событий

Но обычно вы хотели бы отделить свой HTML и Javascript, поэтому я предлагаю вам не использовать inline-обработчики событий, но класть класс по вашей ссылке и добавлять прослушиватель событий.

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

Этот пример будет работать только в современных браузерах (для старых IE вы можете использовать attachEvent(), returnValue и предоставить реализацию для getElementsByClassName() или использовать библиотеку, такую ​​как jQuery, которая поможет в проблемах с несколькими браузерами). Вы можете больше узнать о этом расширенном методе обработки событий в MDN.

JQuery

Я хотел бы оставаться вдали от того, чтобы быть поклонником jQuery, но манипуляции с DOM и обработка событий - это две области, где это помогает в большей степени с различиями в браузерах. Просто для удовольствия, вот как это будет выглядеть с 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>

Ответ 2

Я предлагаю избегать встроенного JavaScript:

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

Вышеописанное обновление для уменьшения пространства, хотя и поддерживает ясность/функцию:

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

Несколько запоздалое обновление, чтобы использовать addEventListener() (как предложено bažmegakapa в комментариях ниже):

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

Вышеуказанное связывает функцию с событием каждой отдельной ссылки; который потенциально весьма расточителен, когда вы могли привязать обработку событий (с помощью делегирования) к элементу-предшественнику, например следующее:

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

Поскольку обработка событий привязана к элементу body, который обычно содержит множество других элементов с возможностью клика, я использовал временную функцию (actionToFunction), чтобы определить, что делать с этим кликом. Если щелкнутый элемент является ссылкой и поэтому имеет tagName из a, обработка клика передается функции reallySure().

Литература:

• addEventListener().
• Условный ('ternary') оператор.
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

Ответ 3

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

Ответ 4

Этот метод немного отличается от любого из приведенных выше ответов, если вы присоединяете обработчик событий с помощью addEventListener (или 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;
  }
}

Вы можете присоединить этот обработчик с помощью:

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

Или для более старых версий Internet Explorer:

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

Ответ 5

Просто для удовольствия, я собираюсь использовать одно событие во всем документе вместо добавления события ко всем тэгам привязки:

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

Этот метод был бы более эффективным, если бы у вас было много якорных тегов. Конечно, он становится еще более эффективным, когда вы добавляете это событие в контейнер, имеющий все теги привязки.

Ответ 6

jAplus

Вы можете сделать это без написания кода 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>

Демо-страница

Ответ 7

ИСПОЛЬЗОВАНИЕ PHP, HTML и JAVASCRIPT для запроса

Просто, если кто-то ищет использование php, html и javascript в одном файле, ответ ниже работает для меня.. Я прикреплен к используемому значку bootstrap "trash" для ссылки.

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

причина, по которой я использовал php код в середине, потому что я не могу использовать его с самого начала..

код ниже не работает для меня: -

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

и я изменил его, как в первом коде, тогда я запускаю как только то, что мне нужно. Надеюсь, что я смогу помочь кому-то в моем случае.

Ответ 8

Вы также можете попробовать следующее:

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