Javascript jQuery DIV单击，带有锚点

要创建可单击的div，我执行以下操作：

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

我不知道这是否是最好的方法，但它对我来说非常有效，除了一个问题： 如果div包含可单击的元素，例如 ，并且用户单击超链接，则超链接和div的可单击都被调用

当锚定标记引用javascript AJAX函数时，这尤其是一个问题，该函数执行AJAX函数并跟随div的“url”属性中的链接

不管怎么说，这个问题？

$（“div.clickable”）。单击(
功能（事件）
{
window.location=$（this.attr（“url”）；
event.preventDefault（）；
});

我知道如果您要将其更改为href，您会：

$("a#link1").click(function(event) { event.preventDefault(); $('div.link1').show(); //whatever else you want to do }); $（“链接1”）。单击（函数（事件）{ event.preventDefault（）； $（'div.link1'）.show（）； //你还想做什么 }); 所以如果你想把它保存在div里，我会试试

$("div.clickable").click(function(event) { event.preventDefault(); window.location = $(this).attr("url"); }); $（“div.clickable”）。单击（函数（事件）{ event.preventDefault（）； window.location=$（this.attr（“url”）； }); 如果您从函数返回“false”，它将停止事件冒泡，因此只有您的第一个事件处理程序将被触发（即，您的锚将看不到单击）

---

有关返回false与preventDefault的详细信息，请参阅。

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

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

---

不久前，我写了一个jQuery插件来实现这一点。它还将类名添加到div（或任何其他要使其可单击的元素）和链接中，这样当div确实可单击时，您就可以使用CSS改变它们的外观。它甚至还添加了可以用来指定悬停和焦点样式的类名

您只需指定要使其可单击的元素并调用其clickable（）方法：在您的情况下，该方法为

$（“div.clickable）.clickable（）；

有关下载+文档，请参见插件页面：

塔克维姆
$（文档）.delegate（“div.info”，“click”，function（）{
window.location=$（this.find（“a”）.attr（“href”）；
});

另一方面，使用“组合”属性（即url）意味着页面将不符合大多数doctype的标准。请注意，HTML5允许使用

数据-

前缀自定义属性，例如

数据url

。使用preventDefault（），不要返回false！ $("div.clickable").click(function(event) { event.preventDefault(); window.location = $(this).attr("url"); });

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

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