Question

我这里有一个可重现的错误，我遇到了Uncaught RangeError: Maximum call stack size exceeded

这只是我调用链接的点击事件。

我的HTML：

<div id="box">
    <a href="#">test</a>
</div>

我的Javascript：

$('#box').click(function() {
    ("a", $(this)).click();
});

现在，点击#box会导致错误。

http://jsfiddle.net/DMAMv/2/

Answer 1

您应该使用stopImmediatePropagation（）停止传播，否则您的传播次数太多

$('#box').click(function() {
    $("a:first", this).click();
});
$('a').click(function(e){
   e.stopImmediatePropagation();
   alert('hi');
});

小提琴http://jsfiddle.net/DMAMv/8/

Answer 2

那是因为它以递归方式触发click事件。这是由两个问题引起的。

第一个是无辜的看法：

("a", $(this)).click();  # note the missing $ at the beginning

这实际上减少到$(this).click()（因为comma operator评估两个操作数并返回第二个操作数），因此#container上的点击事件会触发自身。请考虑以下示例 - http://jsfiddle.net/2VnbG/和http://jsfiddle.net/2VnbG/1/ - 注意在缺少$时如何定位父div。

在前面添加缺少$的行来解决该问题，即$("a", $(this)).click();

下一个问题是锚点上的点击事件会冒泡到父对象（在您的情况下为#container）。如果父对触发新事件的click事件有绑定函数，则循环将无限重复。

要解决这个问题，请使用event.stopPropagation()来阻止事件冒泡DOM树。

以上是上述修复程序的示例：http://jsfiddle.net/DMAMv/9/

Answer 3

我是下拉列表中的一个列表项，所以我希望事件继续冒泡，以便关闭下拉列表。这是我使用的解决方案：

$('div#outer').click(function (e) {
   if (e.target == e.currentTarget) // prevents bubbled events from triggering
      $($(e.currentTarget).children()[0]).trigger('click');
});

jQuery中单击事件的最大范围错误

3 个答案: