jQuery DIV 点击，带锚点

Question

要制作可点击的div，我会这样做：

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

然后

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

我不知道这是否是最好的方法，但它在我这里完美地运行，除了一个问题： 如果

包含可单击的元素，例如 <a href="...">，并且用户点击超链接，那么超链接和div的可单击元素都会被调用。

特别是当锚标签引用JavaScript AJAX函数时，这是一个问题，该函数执行AJAX函数并遵循div中"url"属性中的链接。

有没有解决方案？

- ANaimi

---

顺便提一下，使用一个“虚构”的属性（例如url）将意味着该页面在大多数文档类型中不符合标准。 - Christopher Edwards

请注意，HTML5允许使用"data-"前缀的自定义属性，例如"data-url"。 - Uooo

Answer 1

如果您的函数返回"false"，它将停止事件冒泡，因此只有第一个事件处理程序会被触发（即您的锚点将不会看到点击）。

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

有关return false与preventDefault的详细信息，请参见event.preventDefault() vs. return false.

- Parand

---

请使用preventDefault()，而不是返回false！ - Rosdi Kasim

Answer 2

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

这段代码是用jQuery编写的。它会在点击可点击的div元素时，将窗口位置设置为该元素的url属性，并防止默认事件的发生。

- Sergey Ilinsky

Answer 3

使用自定义的url属性会使HTML无效。虽然这可能不是一个大问题，但所给出的示例都是不可访问的。无法通过键盘导航以及在JavaScript关闭（或被其他脚本阻止）的情况下使用。甚至谷歌也无法找到指定url的页面，至少无法通过此路线找到。

不过要使其可访问非常容易。只需要确保div中有一个常规链接指向该url。使用JavaScript/jQuery，在div中添加onclick重定向到链接的href属性指定的位置。现在，即使JavaScript不起作用，链接仍然可以使用，而且在使用键盘导航时它甚至可以捕捉到焦点（而且您不需要自定义属性，因此您的HTML可以有效）。

我曾经写过一个jQuery插件来实现这个功能。它还为div（或任何其他您想要使其可点击的元素）和链接添加了classNames，因此您可以在div实际可点击时使用CSS修改它们的外观。它甚至添加了你可以用来指定hover和focus样式的classNames。

你需要做的就是指定你想要使之可点击的元素，并调用它们的clickable()方法：在你的情况下，应该是$("div.clickable).clickable(); 要下载+文档，请参见插件页面：jQuery: clickable — jLix

- Sander Aarts

Answer 4

我知道如果你想把它改成href，你会这样做：

$("a#link1").click(function(event) {
  event.preventDefault();
  $('div.link1').show();
  //其他你想做的事情
});

所以如果你想保留div，我建议尝试：

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

- Leanan

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

- Adem Ozturk