检查此链接: jsfiddle example
单击div时,我希望内部链接触发click事件。 但控制台显示click事件一直触发,直到浏览器崩溃。为什么会这样?最新解决方案是什么?
真正的div有很多内容,所以我不希望<a>
标记覆盖整个div或将div包装在<a>
标记内。此功能适用于移动设备。
答案 0 :(得分:5)
因为在每个click
事件中,您再次调用click
,导致永不结束的递归。
由于您的点击处理程序位于div
类box
上,因此点击这些div
内的任何内容都会导致click
事件div
}}
您似乎想要点击div
来关注该链接?您可以这样做,而不是在链接上触发click
:
window.location = $(this).find(".link").attr("href");
答案 1 :(得分:2)
试试这个。它会停止无限循环。但更好的问题是为什么这样做?
$(".box").click(function(e){
console.log("clicked");
$(this).find(".link").trigger("click");
});
$(".link").click(function(e){
e.stopPropagation();
});
答案 2 :(得分:0)
当您触发点击“.link”时,该事件会冒泡到其父级,并最终再次达到“.box”。因此进入递归。 为了防止这种情况,您可以执行类似
的操作$(".box").click(function(e){
if(e.currentTarget == e.target)
{
console.log("clicked");
$(this).find(".link").trigger("click");
}
});
e.target是发生事件的元素,e.currentTarget是绑定事件的元素。
另一种替代解决方案是(推荐),
$(".box").click(function(e){
console.log("clicked");
$(this).find(".link").trigger("click");
});
$(".link").click(function (e)
{
/*This would prevent a click triggered on ".link" to propagate upto its parent i.e ".box" */
e.stopPropagation();
});