将JavaScript事件传递给被覆盖的对象

Question

我正在尝试构建一个jQuery应用程序，其中有一张固定的图片和一张可拖动的第二个图片。 我需要固定的图片在可移动的图片上显示z-index - 固定的图片是带有面孔alpha剪切孔的图片，就像您可能在游乐园找到的那样。 问题在于，一旦可移动（面部）图像与固定图像重叠，点击和拖动事件被固定的图像捕获，而不会到达可移动的图像。 所以它不再是可移动的。 这是我的代码...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>

<div id="fixed" style="position:relative; z-index: 2">
    <img src="background.png">
</div>

<div id="face" style="position:relative; z-index: 1">
    <img src="face.png">
</div>

<script>
    $(function() {
        $("#face").draggable();
    });
</script>

当一个元素被固定在背景后，我该如何使它可拖动？我是否可以手动触发底部对象上的鼠标事件？如果可以，我应该如何调用它们以确保jquery-ui draggable（）正常工作？我能否通过某种方式使固定图像不捕获事件？还是我需要自己编写可拖动机制？

- Leopd

---

我认为你需要找到一种方法将事件信息传递到设置在#face上的jQuery draggable()函数处理程序中。你需要的信息应该在这里找到：http://jqueryui.com/demos/draggable/#events - Andre

Answer 1

我认为我为您找到了一个相当简单的解决方案。基本上，只有在满足某些条件时（例如 #face 在 #fixed 下面），您才能中继事件。请查看此示例。

快速查看事件数据显示，可拖动仅绑定 mousedown，因此那似乎是您需要中继的唯一事件。

$('#face').draggable();

$('#fixed').bind('mousedown', function(e){
    // TODO: IF #face is under #fixed AND mouse is over #face THEN
   $('#face').trigger(e); // trigger the event on face
});

- Josiah Ruddell

---

太棒了。这就是我需要解决它的东西。 - Leopd

Answer 2

我认为最好创建某种“拖动手柄”到下面的元素上，这样它将始终可见（至少在启用拖动时）。或者，一个与图像分离的单独的UI控件作为可拖动图像的“操纵杆”，这样你可以移动图像而不必手动拖放图像本身。

想想看：假设他们将项目拖到顶部项目下面，然后放下它; 他们如何再次拿起它？如果按照您所解释的方式设置（像您可能在游乐园里找到的脸孔切割洞），那么用户将无法看到下面的元素，因此，他们将无法使用鼠标与该元素进行交互。

- ken

---

好的建议。我也可能会这样做。 - Leopd