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

Question

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

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/