jQuery DIV click, с якорями

Question

Для создания div-ов, доступных для кликов, я делаю:

<div class="clickable" url="http://google.com">
    blah blah
</div>

, а затем

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

Я не знаю, является ли это лучшим способом, но он отлично работает со мной, за исключением одного вопроса: Если div содержит элемент с возможностью нажатия, например, , и пользователь нажимает на гиперссылку, гиперссылка и div-clickable называются

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

---

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

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

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

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

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