Простая проблема JavaScript: onClick подтвердите, не препятствуя действиям по умолчанию

Question

Я делаю простую ссылку удаления с событием onClick, которое вызывает диалог подтверждения. Я хочу подтвердить, что пользователь хочет удалить запись. Однако, похоже, что когда в диалоговом окне нажата кнопка «Отмена», действие по умолчанию (то есть ссылка href) все еще выполняется, поэтому запись все равно удаляется. Не уверен, что я делаю не так здесь ... Любой вклад будет высоко ценится.

РЕДАКТИРОВАТЬ: На самом деле, как сейчас выглядит код, страница даже не выполняет вызов функции ... так что диалог вообще не появляется. У меня был код onClick как:

onClick="confirm('Delete entry?')"

, который вызывал диалог, но все еще собирался перейти по ссылке «Отмена».

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script type="text/javascript">

function delete() {
    return confirm('Delete entry?')
}

</script>


...

<tr>
 <c:if test="${userIDRO}">
    <td>
        <a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}"/>" />
        <img src="images/edit.GIF" ALT="Edit this skill." border="1"/></a>
    </td>
    <td>
        <a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}&remove=1"/>" onClick="return delete()"/>
        <img src="images/remove.GIF" ALT="Remove this skill." border="1"/></a>
    </td>
 </c:if>
</tr>

Answer 1

В вашем коде есть опечатка (тег a закрыт слишком рано). Вы можете использовать:

<a href="whatever" onclick="return confirm('are you sure?')"><img ...></a>

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

<script type="text/javascript">
function confirm_delete() {
  return confirm('are you sure?');
}
</script>
...
<a href="whatever" onclick="return confirm_delete()"><img ...></a>

(обратите внимание, что delete является ключевым словом)

Для полноты: современные браузеры также поддерживают события DOM, что позволяет регистрировать более одного обработчика для одного и того же события для каждого объекта, получать доступ к деталям события, останавливать распространение и многое другое; см. События DOM .

Answer 2

Ну, у меня была такая же проблема, и проблема была решена добавлением слова " return " перед подтверждением:

onclick="return confirm('Delete entry?')"

Хотелось бы, чтобы это было для вас полезным ...

Удачи!

Answer 3

Я использую это, работает как шарм. Нет необходимости иметь какие-либо функции, просто встроенные ссылки (ы)

onclick="javascript:return confirm('Are you sure you want to delete this comment?')"

Answer 4

У меня была похожая проблема (нажмите на кнопку, но после отмены нажали, она все еще удаляет мой объект), поэтому сделали это таким образом, надеюсь, это поможет кому-то в будущем:

 $('.deleteObject').click(function () {
    var url = this.href;
    var confirmText = "Are you sure you want to delete this object?";
    if(confirm(confirmText)) {
        $.ajax({
            type:"POST",
            url:url,
            success:function () {
            // Here goes something...
            },
        });
    }
    return false;
});

Answer 5

Использование простой ссылки для действия, такого как удаление записи, выглядит для меня опасно: что, если сканер пытается проиндексировать ваши страницы? Он будет игнорировать любой javascript и переходить по каждой ссылке, вероятно, не очень хорошая вещь.

Вам лучше использовать форму с method = "POST".

И тогда у вас будет событие «OnSubmit», чтобы сделать именно то, что вы хотите ...

Answer 6

<img src="images/delete.png" onclick="return confirm_delete('Are you sure?')"> 



<script type="text/javascript">
function confirm_delete(question) {

  if(confirm(question)){

     alert("Action to delete");

  }else{
    return false;  
  }

}
</script>

Answer 7

Прежде всего, delete - это зарезервированное слово в javascript, я удивлен, что это даже выполняется для вас (когда я тестирую его в Firefox, я получаю синтаксическую ошибку)

Во-вторых, ваш HTML выглядит странно - есть ли причина, по которой вы закрываете открывающие теги привязки с /> вместо * >?

Answer 8

Если вы хотите использовать небольшие встроенные команды в теге onclick, вы можете использовать что-то вроде этого.

<button id="" class="delete" onclick="javascript:if(confirm('Are you sure you want to delete this entry?')){jQuery(this).parent().remove(); return false;}" type="button"> Delete </button>

Answer 9

попробуйте это:

OnClientClick = 'return (подтвердите («Вы уверены, что хотите удалить этот комментарий?»));'

Answer 10

У меня была проблема с IE7 и возвращением false раньше.

Проверьте мой ответ здесь на другую проблему: Javascript не работает в IE