Question

I have a large background div, on which i have bound a function via the jQuery function dblclick.

I have an absolutely positioned div with a greater z-index floating infront of said background div. And I am getting a weird issue where if the floating div (which does have a filled background) is double clicked, the function set for the background is executed.

Basically:

$("#background-div").dblclick(function(){
  alert("why do these problems exist?");
});

//i double click on $("#div-floating-in-front") and see the alert.

any suggestions?

Answer 1

If your floating div is a child of the background div then the click event is bubbling up to it and triggering the alert. You can attach a click event to the floating div and then use jQuery’s stopPropagation to catch the click before it can bubble up:

$("#div-floating-in-front").dblclick(function(event){
  event.stopPropagation();
});