Question

我想创建一个可点击的容器。单击时，应触发第一个子锚点上的click事件。

Html看起来像这样：

<div class="click-area">
    <p>test test test</p>
    <a href="#next">link</a>
</div>

我试过这个：

$(".click-area").click(function () {
    $(this).find("a").first().click();
});

但这会导致“未捕获的RangeError：超出最大调用堆栈大小”javascript错误。

我也试过这个：

$(".click-area").click(function () {
    window.location = $(this).find("a").first().prop('href');
    return false;
});

这将适用于某些链接。

但我也有一些应该启动Bootstrap模式的链接

<a href="#" data-toggle="modal" data-target="#myModal">link modal</a>

并且window.location方法在这里不起作用...

这可能吗？ jsfiddle

Answer 1

您第一次关闭，但在模拟点击事件传播回click-area时导致递归。使用e.stopPropagation（）：

您可能认为这意味着：

$(".click-area").click(function (e) {
    e.stopPropagation();
    $(this).find("a").first().click();
});

但实际上，这不太正确，因为它是必须停止传播的锚点：

仅使用新处理程序停止从锚点传播：

$(".click-area").click(function (e) {
    $(this).find("a").first().click();
});

$(".click-area a").click(function (e) {
    e.stopPropagation();
});

如果您遇到jQuery点击未触发的问题（例如因为JSFiddle中的外部页面链接等），请尝试使用domelement[0].click()（至少进行测试）：

$(".click-area").click(function (e) {
    $(this).find("a")[0].click();
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/3Layy9dr/7/

Answer 2

为什么不做更多的事情：

$(".click-area").click(function () {
    window.location = $(this).find("a").attr('href');
});

单击父div时如何在锚点上触发click事件

2 个答案: