Question

为了制作可点击的div，我这样做：

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

然后

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

我不知道这是不是最好的方式，但除了一个问题外，它与我完美配合：如果div包含可点击元素，例如＆lt; a href =“...”＆gt;，并且用户点击超链接，超链接和div可点击都被称为

当锚标记引用javascript AJAX函数时，这尤其是一个问题，它执行AJAX函数 AND 跟在div的'url'属性中的链接。

无论如何？

Answer 1

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

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

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

Answer 2

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

Answer 3

使用自定义网址属性会使HTML无效。虽然这可能不是一个大问题，但给定的例子既不可访问。不适用于键盘导航，也不适用于JavaScript关闭（或被其他脚本阻止）的情况。即使Google也不会找到位于指定网址的网页，也不会找到至少通过此网址的网页。

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

前段时间我写了一个jQuery插件。它还将classNames添加到div（或任何其他你想要点击的元素）和链接，这样当div确实可以点击时你可以用CSS改变它们的外观。它甚至添加了可用于指定悬停和焦点样式的classNames。

您需要做的就是指定您想要点击的元素并调用他们的clickable（）方法：在您的情况下$("div.clickable).clickable();

有关下载+文档的信息，请参阅插件页面：jQuery: clickable — 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");
});

jQuery DIV点击，带锚点

5 个答案: