Как отобразить диалоговое окно подтверждения при нажатии на ссылку?
Я хочу, чтобы эта ссылка имела диалог JavaScript, который спрашивает пользователя"вы уверены? Y / N".
<a href="delete.php?id=22">Link</a>
если пользователь нажимает "да", ссылка должна загружаться, если" нет " ничего не произойдет.
Я знаю, как это сделать в формах, используя onclick
запуск функции, которая возвращает true
или false
. Но как это сделать с помощью <a>
ссылке?
8 ответов
встроенный обработчик событий
самым простым способом вы можете использовать confirm()
функция в inline 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>
будет работать только в современных браузерах (для старых IEs вы можете использовать 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>
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
я бы предложил избегать встроенного 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;
}
};
}
вышеуказанное обновленное для уменьшения космоса, хотя поддерживающ ясность / функцию:
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?");
};
}
несколько запоздалое обновление, чтобы использовать 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);
}
выше связывает функцию с событием каждой отдельной ссылки; что потенциально довольно расточительно, когда вы можете привязать обработку событий( используя делегирование) к элементу предка, например:
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);
потому что обработка событий прикреплена к body
элемент, который обычно содержит множество других, кликабельных элементов, я использовал промежуточную функцию (actionToFunction
), чтобы определить, что делать с этой кнопкой. Если элемент clicked является ссылкой и, следовательно, имеет tagName
of a
, обработка щелчка передается в
вы также можете попробовать это:
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>
этот метод немного отличается от любого из приведенных выше ответов, если вы присоединяете обработчик событий с помощью 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);
просто для удовольствия я собираюсь использовать одно событие во всем документе вместо добавления события в все якорь теги:
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?' );
}
};
этот метод был бы более эффективным, если бы у вас было много тегов привязки. Конечно, это становится еще более эффективным, когда вы добавляете это событие в контейнер со всеми тегами привязки.
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>
использование PHP, HTML и JAVASCRIPT для запроса
просто если кто-то ищут, используя php, html и javascript в одном файле, ответ ниже работает для меня.. я прикрепил с помощью значка bootstrap "корзина" для ссылки.
<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-м коде, затем я запускаю как раз то, что мне нужно.. Надеюсь, что смогу помочь кому-то в моем деле.