我有一个图像，上面可能有一些 div（指定该图像中的某些选择）。这些 div 应该是可点击的。像这样的东西：
#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”被提醒。
如何解决这个问题？
这里有一个技巧：向内部 div 添加一个像“O”这样的 CHAR，然后给它一个巨大的字体大小（取决于你想要跨越的区域）：
#divInner { /* ... */; font-size: 1000px; color: transparent; }
（我认为还设置了“溢出：隐藏”。）
IE 喜欢容器中有一些东西可以让点击产生影响。如果它完全是空的，它会忽略点击。
一把小提琴：https://jsfiddle.net/cbnk8wrk/1/ https://jsfiddle.net/cbnk8wrk/1/（在 IE 中观看！）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
