(Примечание переводчика: эта статья решает проблему использования JS для открытия новой страницы при нажатии клавиши CTRL)
В упрощенной спецификации HTML5 несколько элементов DOV и/или других элементов уровня блока могут быть включены в тег A. Теперь просто оберните элементы блока с помощью тега <a>, вы можете решить проблему, которую вам изначально нужно было прослушать с помощью JavaScript и вызовов.
Тем не менее, эта форма обертывания с использованием тега <a> также не очень работает - например, есть некоторые теги <a> в элементе блока. В этом случае мы хотим перейти к данному адресу только при нажатии на другие части, отличные от <a> у родителя.
Конечно, использование простого слушателя, подобного следующему, также может удовлетворить наши потребности:
Кода -копия выглядит следующим образом:
cheyelement.addeventlistener ('click', function (e) {
// любой адрес URL -адреса в порядке, или вы можете использовать другой код для его указания.
// Вот атрибут DAT-SRC` DOM этого элемента (атрибут)
window.location = someelement.get ('data-url');
});
... но это иногда имеет плохой пользовательский опыт. Когда вы удерживаете клавишу CTRL (Mac - это клавиша команды) и нажимаете с мышью, он откроет ссылку в том же окне (вкладка). Зная, что есть эта проблема, вы, должно быть, подумали о том, как ее решить. Мы можем достичь этого, изменяя небольшой код. Потратьте некоторое время, чтобы исправить слушателя:
Кода -копия выглядит следующим образом:
cheyelement.addeventlistener ('click', function (e) {
// получить URL
var url = cheelement.get ('data-url');
// Определите, нажал ли клавиша CTRL
if (e.metakey || e.ctrlkey || e.button === 1) {
window.open (url);
} еще {
window.location = url;
}
});
Оригинальный автор реализовал эту функцию на веб -сайте http://davidwalsh.name/, и вы должны помнить об этом при использовании window.location для перенаправления страницы. Это небольшое улучшение кода, но очень важно улучшить удобство использования!