如何在单击父元素div时触发锚链接的单击事件

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

但是这将导致一个"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链接

- Casper Skovgaard

---

一个可点击元素内部的另一个可点击元素会导致问题。为什么要这样设计？ - Michelangelo

@Mikey，你说得对，这让我头疼。如果你有其他结构的想法，请随时在答案中发表。 - Casper Skovgaard

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的click事件时遇到问题（例如由于JSFiddle中的外部页面链接等原因导致无法触发），请尝试使用domelement[0].click()（至少用于测试）：

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

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

这是一个JSFiddle链接，可以用于演示和共享HTML、CSS和JavaScript代码。

- Gone Coding

---

target="_blank" 不是一个好的解决方案。链接应该在同一个窗口中打开。而模态链接应该打开一个 Bootstrap 模态框。 - Casper Skovgaard

@CasperSkovgaard：那只是针对JSFiddle的情况。普通链接必须有效才能在那里工作。你的链接对于JSFiddle来说是无效的 :) 基本上，你尝试过在你的页面中应用建议的更改了吗？ - iCollect.it Ltd

我已经创建了这个测试页面：http://www.metz-dev.dk/dev/test.nsf/click-area.html，但它仍然无法工作。 - Casper Skovgaard

@CasperSkovgaard：当然你的示例什么也做不了...你的链接都是指向同一页的书签链接...你期望发生什么？ - iCollect.it Ltd

那个页面上的问题似乎是其他插件引起的。你尝试过在那个页面上使用 $(this).find("a")[0].click(); 版本吗？它会触发DOM元素上的原生点击事件。应该会触发任何连接的内容。 - iCollect.it Ltd

Answer 2

为什么你不做更像这样的事情：

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

- Parris Varney

---

这不会启动引导模态框。 - Casper Skovgaard