Z-index不起作用

Question

Hi I have a close button on the container and i am trying to create two different click events. When a user click on the close button then it should call the close button click event and when click on the container it should call the container click event.

The container click event is working fine but when clicking on the close button then it is calling both close click event and the contianer click event. I have set the z-index:9999 to the close div but still this is not working.

This is my Jsfiddle code .

$( "#close-button-landscape" ).click(function() {
  alert( "close button click" );
});
$( "#container" ).click(function() {
  alert( "container click" );
});

Thanks for the answers. In the Jquery i can use event.stopPropagation(); but what if click events are not using Jquery and pure javascript . See this updated Jsfiddle , then how to stop the bubble event?

Answer 1

What you should do is to do something called stop propagation

 $( "#close-button-landscape" ).click(function(evt) {
  evt.stopPropagation();
  alert( "close button click" );
});

this prevents the click event from bubbling up to the container one as well.

Note: z-index won't affect anything in this case. z-index only paints elements out of order ... and the area which #container covers is larger than the one that the close button affects

Answer 2

The button is still in the container so you have to stop the click getting through:

$('#close-button-landscape').click(function(event)
{
 event=event||window.event;
 if(event.stopPropagation)
 {
  event.stopPropagation();
 }
 else
 {
  event.cancelBubble=true;
 }
}

Answer 3

Just use stopPropagation

$( "#close-button-landscape" ).click(function(e) {
  e.stopPropagation();
  alert( "close button click" );
});
$( "#container" ).click(function() {
  alert( "container click" );
});