jQuery DIV 点击，带有锚点

Posted 2023-05-08

【中文标题】jQuery DIV 点击，带有锚点

【英文标题】：jQuery DIV click, with anchors

【发布时间】：2010-09-15 20:44:44

【问题描述】：

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

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

然后

$("div.clickable").click(
function()

    window.location = $(this).attr("url");
);

我不知道这是否是最好的方法，但它对我很有效，除了一个问题： 如果 div 包含可点击的元素，例如 ，用户点击超链接，超链接和div的-clickable都被调用

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

有什么办法吗？

【问题讨论】：

顺便说一句，使用“组成”属性（即 url）意味着该页面将不符合大多数 doctype 的标准...

请注意，html5 允许使用 data- 前缀的自定义属性，例如data-url.

【参考方案1】：

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

$("div.clickable").click(
function()

    window.location = $(this).attr("url");
    return false;
);

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

【讨论】：

使用 preventDefault()，不返回 false！

【参考方案2】：

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

【参考方案3】：

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

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

---

我前段时间写了一个 jQuery 插件来做这个。它还将 classNames 添加到 div（或您希望使其可点击的任何其他元素）和链接，以便您可以在 div 确实可点击时使用 CSS 更改它们的外观。它甚至添加了可用于指定悬停和焦点样式的类名。

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

有关下载+文档，请参见插件页面：jQuery: clickable — jLix

【参考方案4】：

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

$("a#link1").click(函数(事件) event.preventDefault(); $('div.link1').show(); //无论你想做什么 );

所以如果你想把它和 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");
);