触发点击事件使浏览器崩溃

Question

Check this link: jsfiddle example

When a div is clicked I want the link inside to trigger a click event. but the console shows that the click event keeps triggering until the browser crashes. Why is this happening? And whats the solution?

The real div's has alot of content inside of it so I don't want the <a> tag to cover the whole div or wrap the div inside a <a> tag. This function is intended to work on mobile devices.

Answer 1

Because in every click event, you call click again, resulting in never ending recursion.

Since your click handler is on div s with the box class, clicking on anything inside of those div s will cause the click event on the div .

It seems like you're wanting a click on the div to follow the link? Instead of triggeing a click on the link, you could do this:

window.location = $(this).find(".link").attr("href");

Answer 2

Try this. It stops the infinite loop. But a better question is why do this?

$(".box").click(function(e){
    console.log("clicked");
    $(this).find(".link").trigger("click");
});

$(".link").click(function(e){
    e.stopPropagation();
});

Answer 3

When you trigger a click on ".link", that event bubbles up to its parent and eventually reaches ".box" again. Hence going into recursion. To prevent this, You could do something like

$(".box").click(function(e){
    if(e.currentTarget == e.target)
    {    
        console.log("clicked");
        $(this).find(".link").trigger("click");
    }
});

The e.target is the element where the event occured and the e.currentTarget is the element on which the event was bound.

One more alternate solution would be (recommended),

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