Средний щелчок (новые вкладки) и ссылки javascript
Я отвечаю за веб-сайт на работе, и недавно я добавил запросы ajaxy, чтобы сделать его более быстрым и отзывчивым. Но возникла проблема.
На моих страницах слева есть индексная таблица, как меню. Как только вы нажмете на него, он сделает запрос, который заполнит остальную часть страницы. В любое время вы можете щелкнуть другой элемент индекса, чтобы загрузить другую страницу.
Перед добавлением javascript можно было щелкнуть средней кнопкой мыши (открывать новые вкладки) для каждого элемента индекса, что позволяло загружать другие страницы, пока я работал с одной из них. Но поскольку я изменил все ссылки на запросы ajax, теперь они выполняют некоторый javascript вместо того, чтобы быть настоящими ссылками. Таким образом, они открывают пустые вкладки только тогда, когда я нажимаю на них средней кнопкой мыши.
Есть ли способ объединить обе функции: ссылки, запускающие javascript при щелчке левой кнопкой мыши или новые вкладки при нажатии средней кнопки? Должен ли быть какой-то уродливый javascript, который улавливает каждый клик и обрабатывает его соответствующим образом?
Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Возможно, я мог бы каждый раз предоставлять по две ссылки, одна из которых запускала javascript, а другая была реальной ссылкой, которая позволяла бы щелкнуть средней кнопкой мыши. Я предполагаю, что одним из них должно быть изображение, чтобы избежать перегрузки индекса.
Это потребует некоторого тестирования, но я считаю, что большинство браузеров не запускают обработчик кликов, когда вы нажимаете на них, а это означает, что используется только ссылка.
Тем не менее, ваша функция-обработчик не должна возвращать false, чтобы гарантировать, что эти ссылки не используются при обычном нажатии.
Обновлено: Почувствовал, что для этого можно использовать пример:
<a href = "/Whatever/Wherever.htm" onclick = "handler(); return false;" />
да. Вместо:
<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!
Я бы не стал считать это проблемой. Если вы структурируете вещи осмысленным образом, вы сможете взглянуть на JS, увидеть, где находятся все перехватчики событий. Если вас это слишком беспокоит, вы мог устанавливаете атрибут rel attr на js или заранее указываете идентификатор с помощью js_ и т. д.
Или, в качестве альтернативы, вы можете использовать атрибут «onclick» по назначению и поместить туда имя функции обработки событий. Переназначение атрибута rel или добавление идентификатора с js_ действительно «плохо пахнет», когда есть атрибут, определенный специально для этой цели.
Я предложил их только потому, что вы сказали, что это усложняет обзор, но если я хочу увидеть, что происходит в JS, я буду искать в JS, а не в HTML. Попытка найти в HTML проблемы с JS дурно пахнет.
@ Роб, единственное, для чего должен быть предназначен onclick, - это вынуть его и застрелить. Метаданные, используемые для обозначения того, что элемент улучшен на уровне поведения, могут «пахнуть» в зависимости от реализации (я бы лично использовал class, который ничего не перепрофилирует), но он не пахнет так ужасно, как уровень поведения, загрязняет глобальную область видимости, не говоря уже об уровне данных.
@eyelidlessness - вы же понимаете, что комментируете комментарии от четыре лет назад, верно? знак равно
@Rob, да, сейчас, но я бы сказал, что мой ответ был бы таким же правдивым тогда, как и сейчас (и это, безусловно, был ответ, который я дал бы тогда, если бы я увидел комментарий в то время). И поскольку я нашел это сегодня в поисках решения проблемы, другие тоже могут - и они могут извлечь пользу из совета, который я оставил.
Событие onclick не будет запускаться для этого типа щелчка, поэтому вам нужно добавить атрибут href, который действительно будет работать. Один из возможных способов сделать это - добавить #bookmark к URL-адресу, чтобы указать целевой странице, какое состояние требуется.
Тем не менее, это приводит к искажению разметки. Я бы проголосовал за то, чтобы присвоить ему идентификатор и оставить JS в JS, которому он принадлежит в любой день недели.
Да, вам нужно найти прогрессивные улучшения и ненавязчивый Javascript, и сначала закодировать свой сайт для работы с включенным Javascript, а затем добавить функции Javascripts после того, как у вас заработает базовый сайт.
<a href = "/original/url" onclick = "return !doSomething();">link text</a>
Для получения дополнительной информации и подробных объяснений просмотрите мой ответ в другом посте.
Мне понравился подход Оли, но он не отличался от левого и среднего щелчков. проверка поля "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.
});
Единственная «проблема» этого подхода заключается в том, что кто-то, просматривающий разметку, не сможет сразу увидеть, что существует связанный обработчик событий.