Question

我有一个裁剪插件，可以在你拖动它时平移图像。我想在顶部涂上一个面膜，以给人一种剪裁形状的印象。 here is the jsfiddle

它在图像掩码div上使用css3属性pointer-events:none;，它可以在chromekit和firefox等webkit浏览器中使用。但它在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。 但我真的不知道它为什么会起作用？我基本上做了三件事。

将掩码src作为选项传递

添加一项检查以查看是否提供了掩码选项，如果是，则加载该函数：

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

让函数将带有蒙版图像的div作为背景图像附加到文档div：

createMask: function(m_src) {

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

有人可以向我解释为什么这个解决方案适用于具有遮罩层覆盖的图像平移？这就像它只是将鼠标事件应用于图像，并忽略了遮罩层。

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。

我相信这会有所不同，因为你的脚本绑定到viewer2 div，因此在其中设置掩码显然允许它在脚本的上下文中运行，而在外部使用则不会。

谁能解释为什么这在IE浏览器中有效？

1 个答案: