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

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

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

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

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

Спасибо.

Ответ 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!

Ответ 2

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

Ответ 3

Мне понравился подход Оли, но он не отличался от левого и среднего кликов. проверяя поле "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.
});

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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