javascript - jQuery如何在整个div可点击时使div中的链接工作

Question

我正在使用此代码使整个 div 可点击。

$(document).on('click', '.clickable', function (e) {
    window.location = $(this).find('a.main').attr("href");
    return false;
});

div 中大约有 4 个链接，我希望它们能够正常工作，因此，如果单击 div，则带有类的链接.main会被调用/单击。我想在 div 中单击其他链接时这样做。他们应该作为一个链接工作。

Answer 1

e.stopPropagation();当您单击某些内容时，用于防止单击背景可单击项DIV

$(document).on('click', 'div.clickable', function (e) {
    window.location.href = $(e.target).find('a.main').attr("href");
    e.stopPropagation();
    return false;
});

更新：检查jsFiddle

Answer 2

如果链接本身被点击，请不要返回 false：

$(document).on('click', '.clickable', function (e) {
    // only execute if no Link was clicked
    if (!$(e.currentTarget).is('a')) {
        window.location = $(this).find('a.main').attr("href");
        return false;
    }
});

这将仅在单击 DIV 时执行您的脚本，而不是在单击链接时执行。因此，您的 div 中的链接将照常运行。

Answer 3

$(document).on('click', '.clickable', function (e) {
    window.location = $(this).find('a.main').attr("href");
    return false;
});

$(document).on('click', '.clickable a', function (e) {
    e.stopPropagation();
});

不要从锚点传播事件。

Answer 4

http://jsfiddle.net/HerrSerker/3qen2/

$(document).on('click', '.clickable a', function (e) {
    e.stopPropagation();
});
$(document).on('click', '.clickable', function (e) {
    self.location = $(this).find('a.main').attr("href");
});