Запрашивать у пользователя подтверждение при нажатии на ссылку - PullRequest
Новая
       4

Запрашивать у пользователя подтверждение при нажатии на ссылку

5 голосов
/ 29 июня 2011

У меня есть ссылка, которая выполняет потенциально опасную функцию (что-то удаляет).Я хочу подсказать пользователю, действительно ли он хочет это сделать.Я хочу сделать это с помощью javascript, и это должно быть очень просто.

Мои решения на данный момент: 

<a href='/delete' onclick='return confirm("Are you sure?")'>delete</a>

.. это плохо в том смысле, что они не запускаются при среднем нажатии вFirefox и IE. 

<a href='/delete' onmousedown='return confirm("Are you sure?")'>delete</a>

.. не работает.Даже если при нажатии Ok возвращается true, ссылка не перемещается.

Как правильно это реализовать?

Ответы [ 2 ]

15 голосов
/ 29 июня 2011 
<a href='#' onclick='confirmUser()'>delete</a>

javascript 

 function confirmUser(){
    var ask=confirm("Are you sure");
    if(ask){
      window.location="/delete";
     }
}
5 голосов
/ 19 декабря 2013

Я только что решил эту проблему для клиента онлайн-банкинга.FDIC требует подтверждения «speedbump» всякий раз, когда пользователь переходит на сторонний сайт.Мы хотели сделать это ненавязчиво и сделать невозможным обход.

Я протестировал это с IE, Firefox, Chrome и Android - щелкни, щелкни правой кнопкой мыши, щелкни средней кнопкой мыши, нажми Shift, нажми F10, введите, долгое нажатие, все (Firefox трудный).Либо вы получаете быстрый удар, либо вы получаете пустую вкладку, вы не можете обойти ее. 

document.ready = function() {

    var handleSpeedBump = function(e) {
        e.preventDefault();

        var href = this.getAttribute("data-href");
        var sure = confirm("Are you sure you want to navigate to " + href + "?  This is a third party site and not owned by this institution.");
        if (!sure) return;
        document.location = href;
    }

    $("a.speedbump")
        .click(handleSpeedBump)
        .bind("contextmenu", handleSpeedBump)
        .dblclick(handleSpeedBump)
        .each(function() {
            var href = this.href;
            this.setAttribute("data-href", href);
            this.href = "javascript:void('Navigate to " + href.replace("'", "") + "')";
        })
}

Чтобы это работало, просто напишите свою ссылку в обычном порядке и добавьте «быстрый удар» к ее классам. 

<A href="www.thirdpartysite.com" class="speedbump">Here is the link!</A>
...