javascript - Click on a lower z-index element - Stack Overflow

admin管理员组

文章数量:1022516

I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

 

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

 

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 25, 2015 at 17:56 Becky asked Aug 25, 2015 at 17:44 BeckyBecky 5,61599 gold badges4444 silver badges7979 bronze badges 3

• But it's really necessary to click beneath the image? Why will you use it? – gioNicol Commented Aug 25, 2015 at 18:00
• Does the image have to be in front of the div? The div would have to be on top, using z-index with a position noted in the css. – Georgette Pincin Commented Aug 25, 2015 at 18:00
• 1 Yeah, something's odd about your setup. What is the purpose of the smiley? Would it be better to just make the smiley a background image of the div or to put it inside the div? You can always use jQuery next() or closest() to acplish this, but I have a feeling that there's something off about the markup setup. – Gene Parcellano Commented Aug 25, 2015 at 18:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You have to use CSS pointer-events property. Just add to img styles:

pointer-events: none;

EDIT: I'm sorry, I made a mistake, it has very good support! Can I use

Assign an id to your image:

<img id='image' src="smiley.gif" style="z-index: 2; width:200px; height 200px;">

and use click event on image to do whatever you want to do with your div

$('#image').click(function(){
    //perform tasks on your div here
    $('#theDiv').css('background-color', '#fff'); 
});

I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

 

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

I've got a div and an image overlapping one over the other. The image is in front of the div. Is it possible to be able to click on the div ignoring the image?

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

 

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 25, 2015 at 17:56 Becky asked Aug 25, 2015 at 17:44 BeckyBecky 5,61599 gold badges4444 silver badges7979 bronze badges 3

• But it's really necessary to click beneath the image? Why will you use it? – gioNicol Commented Aug 25, 2015 at 18:00
• Does the image have to be in front of the div? The div would have to be on top, using z-index with a position noted in the css. – Georgette Pincin Commented Aug 25, 2015 at 18:00
• 1 Yeah, something's odd about your setup. What is the purpose of the smiley? Would it be better to just make the smiley a background image of the div or to put it inside the div? You can always use jQuery next() or closest() to acplish this, but I have a feeling that there's something off about the markup setup. – Gene Parcellano Commented Aug 25, 2015 at 18:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You have to use CSS pointer-events property. Just add to img styles:

pointer-events: none;

EDIT: I'm sorry, I made a mistake, it has very good support! Can I use

Assign an id to your image:

<img id='image' src="smiley.gif" style="z-index: 2; width:200px; height 200px;">

and use click event on image to do whatever you want to do with your div

$('#image').click(function(){
    //perform tasks on your div here
    $('#theDiv').css('background-color', '#fff'); 
});

本文标签： javascriptClick on a lower zindex elementStack Overflow