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


269

Я хочу, чтобы эта ссылка имела диалог JavaScript, который спрашивает пользователя: « Вы уверены? Да / Нет ».

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

Если пользователь нажимает «Да», ссылка должна загрузиться, если «Нет», ничего не произойдет.

Я знаю, как сделать это в формах, используя onclickфункцию, которая возвращает trueили false. Но как мне сделать это с помощью <a>ссылки?


Как мы можем достичь этого angularjs1.x
Бхаскара Арани

Ответы:


597

Встроенный обработчик событий

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

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

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

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

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

Этот пример будет работать только в современных браузерах (для старых ИЭ вы можете использовать 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>

Было ли это так просто! Я смущен или как! Я просто предположил, что работал только на формах. Работает ли диалог подтверждения для каждого кликабельного элемента?
Кристофер

1
@Tophe Сам диалог подтверждения не имеет ничего общего с конкретными элементами.
Капа

1
Для чего-то столь же простого, как это, действительно ли необходимо разделять HTML и JavaScript? Какие проблемы вы могли бы предвидеть, оставив такую ​​простую и короткую функцию встроенной?
Кьяран Галлахер

5
@CiaranG Это всегда начинается так :), затем вы добавляете то и это и т. Д. Если вам удастся охватить разделение задач, вы будете чувствовать себя чище, если избавитесь от большинства этих встроенных обработчиков. Им просто нечего делать в вашем HTML. По крайней мере, на мой взгляд, и, по крайней мере, в большинстве случаев. Всегда есть особые обстоятельства - лень не должна быть одной из них.
Капа

@Ulysnep Согласно вашему предложению по редактированию, была ошибка при пропуске точки с запятой после confirm(…)встроенного обработчика. Я не мог воспроизвести это.
user4642212

15

Я бы рекомендовал избегать встроенного 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()функции.

Ссылки:


Спасибо. Короткое действующее решение для подтверждения работало Почему вы предлагаете избегать встроенного кода? Я обычно держусь подальше от встроенного CSS по очевидным причинам, но каковы причины в коротких фрагментах javascript?
Кристофер

По той же причине, по которой встроенный CSS не рекомендуется, его сложнее поддерживать, и это приводит к более сложному HTML и требует чрезмерного объема работы для обновления в случае изменения требований.
Дэвид говорит восстановить Монику

Я согласен с тем, чтобы не использовать встроенные обработчики. Но если мы в любом случае добавим наши обработчики в сценарий, следует использовать расширенную модель ( addEventListener). +1 хотя.
Капа

@ bažmegakapa: я ... склонен согласиться; но я должен признаться, я еще не освоился с addEventListener()моделью.
Дэвид говорит восстановить Монику

Вы можете заменить if(check == true)на if(check).
Аноним


5

Вы также можете попробовать это:

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

Ответ от @kapa очень легкий и менее грязный
dipenparmar12

1

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>

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


11
Спасибо, что поделились, но, конечно, вы используете Javascript, вы добавляете целую библиотеку для обработки чего-то очень простого. Стоит ли оно того? Я не знаю эту библиотеку, я прочитаю об этом, если вы будете использовать ее и для других целей, может быть, она стоит дополнительной нагрузки ...
Маркос Буарке

1
Две библиотеки для этой простой вещи?
сок

0

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

Если вы заботитесь о старых IE, не забудьте window.event.
Капа

0

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

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

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


0

Большинство браузеров не отображают пользовательское сообщение, переданное confirm().

С помощью этого метода вы можете показать всплывающее окно с пользовательским сообщением, если ваш пользователь изменил значение любого <input> поля.

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

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

Попробуйте изменить значение ввода в примере, чтобы получить предварительный просмотр его работы.


-2

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

Просто, если кто-то ищет использование php, html и javascript в одном файле, ответ ниже работает для меня ... Я прикрепил значок ссылки "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>";

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.