Подтвердить что ты не робот

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's-clickable называются

Это особенно проблема, когда тег привязки ссылается на функцию javascript AJAX, которая выполняет функцию AJAX. И следует ссылку в атрибуте url div.

В любом случае вокруг этого?

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы вернете "ложь" из вашей функции, это остановит событие пузырька, так что только ваш первый обработчик события будет запущен (т.е. ваш якорь не увидит клик).

$("div.clickable").click(
function()
{
    window.location = $(this).attr("url");
    return false;
});

См. event.preventDefault() vs. return false для получения подробной информации о возврате false vs. preventDefault.

Ответ 2

$("div.clickable").click( function(event) { window.location = $(this).attr("url"); event.preventDefault(); });

Ответ 3

Использование настраиваемого атрибута url делает HTML недействительным. Хотя это не может быть большой проблемой, данные примеры не доступны. Не для навигации по клавиатуре, а не в случаях, когда JavaScript выключен (или заблокирован каким-либо другим script). Даже Google не найдет страницу, расположенную по указанному URL, а не по этому маршруту.

Это довольно просто сделать доступным. Просто убедитесь, что в div есть регулярная ссылка, указывающая на URL. Используя JavaScript/jQuery, вы добавляете onclick в div, который перенаправляет на местоположение, указанное атрибутом link href. Теперь, когда JavaScript не работает, ссылка по-прежнему работает, и даже при использовании клавиатуры для навигации (даже если вам не нужны настраиваемые атрибуты, поэтому ваш HTML-код может быть действительным) даже может уловить фокус.

Я написал плагин jQuery некоторое время назад, который делает это. Он также добавляет имена классов в div (или любой другой элемент, который вы хотите сделать кликабельным) и ссылку, чтобы вы могли изменить их внешний вид с помощью CSS, когда div действительно доступен для клика. Он даже добавляет имена классов, которые можно использовать для указания стилей наведения и фокусировки.

Все, что вам нужно сделать, это указать элемент (ы), который вы хотите сделать кликабельным, и вызвать их метод clickable(): в вашем случае это будет $("div.clickable).clickable();

Для загрузки + документации см. страницу плагина: jQuery: clickable — jLix

Ответ 4

Я знаю, что если бы вы изменили это на 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");
});

Ответ 5

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