Каков наилучший способ заменить ссылки функциями JS?

Question

Шаблон, который часто появляется в одном из веб-приложений, над которыми я работаю, - это ссылки, которые раньше были просто ссылками в виде тегов, теперь нужно всплывающее окно с вопросом: «Вы уверены?» прежде чем ссылка пойдет. (Если пользователь нажимает «Отмена», ничего не происходит.)

У нас есть решение, которое работает, но каким-то образом мы являемся магазином веб-приложений без эксперта по Javascript, поэтому у меня осталось такое ощущение, будто есть лучший способ выполнить работу.

Итак, эксперты JS, какой самый совместимый со стандартами кросс-браузерный способ добиться этого?

(Для справки, это уже сайт, требующий JS, поэтому не нужно иметь версию, отличную от JS. Но он должен работать в любых современных браузерах.)

(Кроме того, для бонусных баллов было бы неплохо, если бы у людей с отключенным JS ссылки не работали, а не обходили окно подтверждения.)

Answer 1

ненавязчивый Javascript

Рекомендуется добавлять методы обработки событий в ссылки.

Функция verify () создает диалоговое окно, которое вы описали, и возвращает true или false в зависимости от выбора пользователя.

Методы-обработчики событий в ссылках имеют специальное поведение: они убивают действие ссылки, если возвращают false.

var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    return confirm("Are you sure?");
};

Если вы хотите, чтобы ссылка на требовала JavaScript , HTML-код необходимо отредактировать. Удалить ссылку:

<a href="#" id="confirmToFollow"...

Вы можете явно указать назначение ссылки в обработчике событий:

var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    if( confirm("Are you sure?") ) {
        window.location = "http://www.stackoverflow.com/";
    }
    return false;
};

Если вы хотите, чтобы один и тот же метод вызывался на нескольких ссылках, вы можете получить список ссылок, который вам нужен, и применить метод к каждой из них, когда будете выполнять цикл по списку узлов:

var allLinks = document.getElementsByTagName('a');
for (var i=0; i < allLinks.length; i++) {
    allLinks[i].onclick = function () {
        return confirm("Are you sure?");
    };
}

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

Альтернативные подходы (недопустимые практики):

Один обескураженный прием - это присоединение метода с помощью атрибута onclick :

<a href="mypage.html" onclick="...

Еще один обескураженный прием - установить атрибут href для вызова функции:

<a href="javascript: confirmLink() ...

Обратите внимание, что эти обескураженные практики - все рабочие решения.

Answer 2

Вот как мы это делаем:

<a href="#" onClick="goThere(); return false;">Go to new page</a>`

function goThere() 
{ 
   if( confirm("Are you sure?") ) 
    { 
       window.location.href="newPage.aspx"; 
    } 
}

(РЕДАКТИРОВАТЬ: код переформатирован, чтобы избежать горизонтальной прокрутки)

Answer 3

Если вы используете jQuery, вы должны сделать:

jQuery(document).ready(
    jQuery("a").click(){
        //you'd place here your extra logic
        document.location.href = this.href;
    }
);

Answer 4

<a href="http://..." onclick="return confirm('are you sure?')">text</a>

Answer 5

В jquery это что-то вроде:

$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});

Если я понимаю, что упомянул jgreep, если вы хотите, чтобы подтверждение появлялось только на нескольких ссылках, вы бы связывали обработчик кликов только с ссылками с нужным классом. Вы можете сделать это только для якорей или для любого HTML-элемента, который имеет класс.

$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});

Answer 6

Взгляните на Как лучше всего открыть новое окно браузера . Вы можете сделать что-то подобное, но выбросить подтверждение до открытия нового окна.

Answer 7

var links = document.getElementsByTagName('A');

for (var i = 0; i < links.length; i++)
{ 
    links[i].onclick = function ()
    {       
       return Confirm("Are you sure?");
    }
}

Это применяет сообщение ко всем ссылкам, однако немного сложнее заставить ссылки не работать без javascript автоматически (на самом деле это невозможно).

Answer 8

Версия с привязкой к классу (нет необходимости во встроенных атрибутах onclick): связать этот внешний после всех подтверждаемых элементов управления:

// dangerous - warnings on potentially harmful actions
// usage: add class="dangerous" to <a>, <input> or <button>
// Optionally add custom confirmation message to title attribute

function dangerous_bind() {
    var lists= [
        document.getElementsByTagName('input'),
        document.getElementsByTagName('button'),
        document.getElementsByTagName('a')
    ];
    for (var listi= lists.length; listi-->0;) { var els= lists[listi];
        for (var eli= els.length; eli-->0;) { var el= els[eli];
            if (array_contains(el.className.split(' '), 'dangerous'))
                el.onclick= dangerous_click;
        }
    }
}

function array_contains(a, x) {
    for (var i= a.length; i-->0;)
        if (a[i]==x) return true;
    return false;
}

function dangerous_click() {
    return confirm(this.title || 'Are you sure?');
}

dangerous_bind();

Это немного затянуто из-за того, что привязка работает и с кнопками отправки / отправки. В целом, хотя имеет смысл иметь «опасные» опции, которые вы хотите подтвердить кнопками, а не ссылками. GET-запросы, генерируемые ссылками, на самом деле не должны иметь никакого активного эффекта.