Question

点击父 div 时如何触发锚点上的点击事件

2015-09-15

4369

javascript jquery twitter-bootstrap

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

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