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

17

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

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

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

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

Спасибо.

    
задан Franck Mesirard 30.09.2008 в 10:42
источник

7 ответов

21

Да. Вместо:

<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();
});

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

Сохраняйте JS в JS!

    
ответ дан Oli 30.09.2008 в 10:46
источник
  • Единственная проблема с этим подходом заключается в том, что кто-то, просматривающий разметку, не сможет сразу увидеть, что есть связанный обработчик событий. –  Rob 30.09.2008 в 11:00
  • Я бы не рассматривал эту проблему. Если вы структурируете вещи значимым образом, вы должны иметь возможность посмотреть на JS, увидеть, где все крючки событий. Если вы слишком много беспокоитесь об этом, вы можете установить rel attr в js или добавить идентификатор с помощью js_ и т. Д. –  Oli 30.09.2008 в 12:08
  • Или, альтернативно, вы можете использовать атрибут «onclick», как он предназначен, и поместить там имя функции обработки событий. Повторное назначение атрибута «rel» или добавление идентификатора с помощью js_ действительно «плохо пахнет», когда есть определенный атрибут, специально предназначенный для этой цели. –  Rob 30.09.2008 в 13:18
  • Я только предлагал их, потому что вы сказали, что сделать это сложнее, но если я хочу посмотреть, что происходит в JS, я буду смотреть в JS, а не на HTML. Попытка охоты через HTML для вопросов JS пахнет намного больше. –  Oli 30.09.2008 в 13:47
  • @Rob, единственное, что нужно сделать, - это снять и выстрелить. Метаданные, используемые для указания того, что элемент улучшен на поведенческом уровне, могут «пахнуть» в зависимости от реализации (я лично использовал бы класс, который не пересматривает ничего), но он не пахнет нигде почти так же ужасно, как слой поведения, загрязняет глобальную сферу, не говоря уже о слое данных. –  eyelidlessness 29.04.2012 в 21:05
Показать остальные комментарии
3

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

    
ответ дан Lewis Jubb 30.09.2008 в 10:58
источник
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.
});
    
ответ дан viggity 30.03.2013 в 20:58
источник
1

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

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

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

<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" />
    
ответ дан Guvante 30.09.2008 в 10:46
источник
1
<a href="/original/url" onclick="return !doSomething();">link text</a>

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

ответ дан Fczbkk 30.09.2008 в 16:25
источник
0

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

    
ответ дан Franck Mesirard 30.09.2008 в 10:45
источник
0

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

    
ответ дан Paul Dixon 30.09.2008 в 10:47
источник
  • Тем не менее он разыгрывает разметку. Я проголосовал за то, что дал ему идентификатор и оставил JS в JS, где он принадлежит в любой день недели. –  Oli 30.09.2008 в 10:48