Question

我们的部分网络应用程序有一个部分可归结为此（简化）：

<html>    
  <head>
    <title>Doubleclick test</title>
    <style type="text/css">
      body { overflow:auto; background-color:White; }

      .wrapper { position:absolute; left:10; top:10; }

      .background { position:absolute; display:inline; width:1024; z-index:-1; height:150; }

      .outerspan { position:absolute; left:720px; top:50px; width:330px; height:80px; text-align:right; z-index:300; overflow:hidden; border: 1px black dashed; }

      .innerspan  { overflow:hidden; }
    </style>
  </head>
  <body ondblclick="alert('doc dblclick')">
    <div class="wrapper">
      <img class="background" src="" alt="image placeholder" unselectable="on"/>
      <span class="outerspan" ondblclick="alert('span dblclick'); window.event.cancelBubble=true;" unselectable="on">
        <span class="innerspan" unselectable="on">TEXT_HERE</span>
      </span>
    </div>
  </body>
</html>

（仅限说明;实际的应用程序可以更清晰地设置其ondblclick事件，并且我知道冒泡取消不是交叉浏览器的写入。）

理想的行为是，在虚线边框上或内部的任何位置双击都会触发外跨区上的处理程序，在Firefox和Opera中测试正常。

不幸的是，目标浏览器是IE8或更高版本（如果鼠标位于跨越<img>的跨度的一部分上），如果鼠标在右侧，则仅触发范围ondblclick引发事件时的虚线边框或内部文本（它会触发文档ondblclick）。在我们的测试中，IE9的行为方式相同。

已经尝试过：在内部块的两个跨距和display:block;上设置width:100%;height:100%;;没运气。如果在outerspan上设置背景颜色，它可以根据需要工作，但不幸的是我们需要背景透明，IE8不支持RGBA作为背景颜色，并且使用渐变滤镜方法无法解决事件问题。

是否可以通过CSS（或标记）使事件正常工作而无需借助透明的背景图像？

（这里的理想答案是跨浏览器解决方案，但针对IE8 +的解决方案就足够了;谢谢。）

鼠标事件通过<span> </span>落下

0 个答案: