средний щелчок (новые вкладки) и ссылки на 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 подключите ссылку через ее ID для выполнения вызова AJAX. Помните, что вам нужно, чтобы событие click не всплывало вверх. В большинство фреймворков встроен обработчик событий, который вы можете вызвать (просто посмотрите на его класс Event).

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

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

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

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

Answer 2

Мне понравился подход Оли, но он не различал левый и средний щелчки. проверка поля «which» в 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, чтобы эти ссылки не использовались при обычном щелчке.

EDIT: Чувствовал, что это может использовать пример:

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

Answer 6

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

Answer 7

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