单击放置在IE中的图像上的div [英] Clicking on a div placed over an image in IE

问题描述

我有一个可能有一些div的图像（指定该图像中的某些选择）。这些div应该是可点击的。类似的东西：

I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:

#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; } 
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer;  top: 20px; left: 20px; }

<div id="divOuter">
    <img src="SomeImage.jpg" />
    <div id="divInner"></div>
</div>

$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });

在chrome和FF中，它按预期工作（指针出现在div上，点击它提醒divInner 然后divOuter）。

然而，在IE8中它没有 - 我只有在悬停/点击内部div边界时才有相同的行为。当在div中单击时，只有divOuter被警告。

如何解决这个问题？

In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?

推荐答案

这是一个黑客：在内部div中添加一个类似O的CHAR，然后给它一个巨大的字体大小（取决于你想要跨越的区域）：

Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):

#divInner { /* ... */; font-size: 1000px; color: transparent; }

（我认为也设置为溢出：隐藏。）

(Also set "overflow: hidden" I think.)

IE喜欢容器中有东西可以让点击影响。如果它只是完全为空，它会忽略点击。

IE likes there to be something there in the container for the click to affect. If it's just completely empty, it ignores clicks.

小提琴： https://jsfiddle.net/cbnk8wrk/1/ （在IE中观看！）

a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)

这篇关于单击放置在IE中的图像上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！