jquery - 有人可以解释为什么这在 IE 浏览器中有效吗？

Question

我有一个裁剪插件，可以在您拖动图像时平移图像。我想在顶部应用蒙版 png 以给人一种切割形状的印象。 here is the jsfiddle

它在图像 mask div 上使用 css3 属性 pointer-events:none;，并且它适用于 webkit 浏览器，如 chrome 和 firefox。但它在 IE 中不起作用，因为 pointer-events: none; 仅适用于 SVG。

我对如何通过 div 传递指针事件做了很多研究。我尝试了一些解决方案，但很头疼，还有一些没有用:

so question

forward mouse events through layers

在深入了解我使用的插件后，我能够扩展它并让它在 IE 浏览器(仅测试 8 和 9)和其他浏览器中工作，而不是使用 pointer-events 选项。 Here is the jsfiddle of the new version . 但我真的不知道它为什么有效？我基本上做了三件事。

1. 将掩码 src 作为选项传入

2. 添加检查以查看是否提供了屏蔽选项，如果提供则加载函数:

   if (this.options.mask_src) {
     var masksrc = this.options.mask_src;
     this.createMask(masksrc);
   }
   

3. 让函数将带有 mask 图像的 div 作为背景图像附加到文档 div:

   createMask: function(m_src) {
   
       $('<div class="iviewer_image_mask" style="background: url('+ m_src +');"></div>').appendTo(this.container);
   },
   

任何人都可以向我解释为什么此解决方案适用于 mask 层覆盖的图像平移吗？这就像它只是将鼠标事件应用于图像，而忽略了 mask 层。

Answer 1

这似乎是由于两个 div 元素的位置所致。在您的非功能版本中，这是 html 结构(简化):

<div class="wrapper">
    <div id="viewer2" class="viewer">
      <img />
    </div>
    <div class="image-mask"></div>
</div>

在您插入元素的功能版本中，这就是它的最终结果:

<div class="wrapper">   
    <div class="viewer iviewer_cursor" id="viewer2" >
      <img />
      <div class="iviewer_image_mask"></div>
    </div>
</div>

并且通过将掩码移动到您原来的 viewer div 中，我可以让它工作 in this fiddle .

我相信这会有所不同，因为您的脚本绑定(bind)到 viewer2 div，所以将掩码放在里面显然允许它在您的脚本上下文中运行，而将它放在外面没有。