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

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()(因为逗号运算符计算两个操作数并返回第二个操作数),因此您的click事件#container触发自身.请考虑以下示例 - http://jsfiddle.net/2VnbG/和http://jsfiddle.net/2VnbG/1/ - 注意$缺少父div的目标.

在前面加上缺失的线$来解决这个问题,即$("a", $(this)).click();

下一个问题是锚点上的单击事件将冒泡到父对象(在您的情况下#container).如果父对触发新事件的click事件有绑定函数,那么循环将无限重复.

要解决这个问题,请使用event.stopPropagation()停止事件冒泡DOM树.

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