單擊父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/

Answer 2

你為什么不做更多的事情：

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