Средний щелчок (новые вкладки) и ссылки на JavaScript

Question

Я отвечаю за веб-сайт на работе, и недавно я добавил запросы ajaxy, чтобы сделать его более быстрым и отзывчивым. Но это подняло проблему.

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

Перед добавлением javascript можно было щелкнуть средней кнопкой мыши (открыть новые вкладки) для каждого элемента индекса, что позволило загружать другие страницы, пока я работал с одной из них. Но так как я изменил все ссылки на запросы ajax, они теперь выполняют некоторый javascript вместо реальных ссылок. Таким образом, они открывают пустые вкладки только тогда, когда я нажимаю на них средним

Есть ли способ объединить обе функции: ссылки, запускающие JavaScript при щелчке левой кнопкой мыши, или новые вкладки при нажатии средней кнопкой мыши? Должен ли это быть какой-то уродливый javascript, который ловит все клики и соответственно с ними справляется?

Благодарю.

Answer 1

Да. Вместо:

<a href="javascript:code">...</a>

Сделай это:

<a href="/non/ajax/display/page" id="thisLink">...</a>

А затем в вашем JS подключите ссылку через ее идентификатор для выполнения вызова AJAX. Помните, что вам нужно, чтобы событие click не всплывало вверх. Большинство фреймворков имеют встроенный обработчик событий, который вы можете вызвать (просто посмотрите на его класс Event).

Вот обработка событий и обработчик событий в jquery:

$("#thisLink").click(function(ev, ob) {
    alert("thisLink was clicked");
    ev.stopPropagation();
});

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

Держите свой JS в JS!

Answer 2

Мне понравился подход Оли, но он не различал левый и средний щелчки. проверка поля "которые" в eventArgs даст вам знать.

$(".detailLink").click(function (ev, ob) {
    //ev.which == 1 == left
    //ev.which == 2 == middle
    if (ev.which == 1) {
        //do ajaxy stuff

        return false; //tells browser to stop processing the event
    }
    //else just let it go on its merry way and open the new tab.
});

Answer 3

Да, вам нужно найти прогрессивное улучшение и ненавязчивый Javascript, а также кодировать свой сайт, чтобы сначала работать с включенным Javascript, а затем добавить функции Javascripts после того, как у вас будет работать базовый сайт.

Answer 4

<a href="/original/url" onclick="return !doSomething();">link text</a>

Для получения дополнительной информации и подробного объяснения смотрите мой ответ в другом посте.

Answer 5

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

Однако не обязательно, чтобы функция-обработчик возвращала false, чтобы эти ссылки не использовались при обычном щелчке.

РЕДАКТИРОВАТЬ: чувствовал, что это может использовать пример:

<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" />

Answer 6

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

Answer 7

Событие onclick не будет запущено для этого типа клика, поэтому вам нужно добавить href атрибут, который на самом деле будет работать. Один из возможных способов сделать это, добавив #bookmark на URL-адрес, чтобы указать целевой странице, каково требуемое состояние.