JQuery DIV click, с якорями
Чтобы создать div с возможностью нажатия, я делаю:
<div class = "clickable" url = "http://google.com">
blah blah
</div>
а потом
$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
});
Я не знаю, лучший ли это способ, но он отлично работает со мной, за исключением одной проблемы: Если div содержит элемент с возможностью нажатия, например <a href="...">, и пользователь нажимает на гиперссылку, вызываются как гиперссылка, так и интерактивный элемент div
Это особенно проблема, когда тег привязки ссылается на функцию AJAX javascript, которая выполняет функцию AJAX. И следует по ссылке в атрибуте url элемента div.
Во всяком случае вокруг этого?
Обратите внимание, что HTML5 позволяет настраивать атрибуты с префиксом data-, например data-url.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
$("div.clickable").click(
function(event)
{
window.location = $(this).attr("url");
event.preventDefault();
});
Я знаю, что если бы вы изменили это на href, вы бы сделали:
$("a#link1").click(function(event) {
event.preventDefault();
$('div.link1').show();
//whatever else you want to do
});
поэтому, если вы хотите сохранить его с помощью div, я бы попробовал
$("div.clickable").click(function(event) {
event.preventDefault();
window.location = $(this).attr("url");
});
Если вы вернете «false» из своей функции, это остановит всплытие событий, поэтому сработает только ваш первый обработчик событий (т. Е. Ваша привязка не увидит щелчка).
$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
return false;
});
См. event.preventDefault () против возврата false для получения подробной информации о return false и preventDefault.
Используйте preventDefault (), а не возвращайте false!
Использование настраиваемого атрибута url делает HTML недействительным. Хотя это не может быть большой проблемой, данные примеры недоступны. Не для навигации с клавиатуры и не в тех случаях, когда JavaScript отключен (или заблокирован каким-либо другим скриптом). Даже Google не найдет страницу, расположенную по указанному URL-адресу, по крайней мере, по этому маршруту.
Однако сделать это доступным довольно легко. Просто убедитесь, что внутри div есть обычная ссылка, указывающая на URL-адрес. Используя JavaScript / jQuery, вы добавляете onclick в div, который перенаправляет на место, указанное атрибутом ссылки href. Теперь, когда JavaScript не работает, ссылка все еще работает, и она может даже поймать фокус при использовании клавиатуры для навигации (и вам не нужны настраиваемые атрибуты, поэтому ваш HTML может быть действительным).
Некоторое время назад я написал плагин jQuery, который делает это. Он также добавляет classNames в div (или любой другой элемент, который вы хотите сделать интерактивным) и ссылку, чтобы вы могли изменить их внешний вид с помощью CSS, когда div действительно доступен для щелчка. Он даже добавляет classNames, которые вы можете использовать для указания стилей наведения и фокуса.
Все, что вам нужно сделать, это указать элементы, которые вы хотите сделать интерактивными, и вызвать их метод clickable (): в вашем случае это будет $("div.clickable).clickable();.
Для загрузки + документации см. Страницу плагина: jQuery: кликабельно - jLix
<div class = "info">
<h2>Takvim</h2>
<a href = "item-list.php"> Click Me !</a>
</div>
$(document).delegate("div.info", "click", function() {
window.location = $(this).find("a").attr("href");
});
Кроме того, использование атрибута «выдуманный» (например, url) будет означать, что страница не будет соответствовать стандартам большинства doctype ...