javascript - 单击父div时如何在 anchor 上触发单击事件

Question

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

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

但这会导致“Uncaught RangeError: Maximum call stack size exceeded”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();
});

但实际上，这并不完全正确，因为它是您必须停止传播的 anchor :

仅使用新处理程序停止从 anchor 传播:

$(".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/