CODEWITHSUNDEEP
javascriptjqueryhtmlcssz-index
Owais Ahmed
Owais Ahmed

Reputation: 1438

Z-index not working

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?

Upvotes: 1

Views: 134

Answers (3)

Carlos Roso
Carlos Roso

Reputation: 1495

Just use stopPropagation

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

Upvotes: 1

sanepete
sanepete

Reputation: 1120

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;
 }
}

Upvotes: 1

Daemedeor
Daemedeor

Reputation: 1013

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

Upvotes: 1

Related Questions