javascript - 将 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() 正常工作？我可以以某种方式获得固定图像而不是捕获事件吗？还是我需要手动编写自己的可拖动机制？

Answer 1

我想我为您找到了一个非常简单的解决方案。基本上只有在满足某些条件时才可以转发事件(例如#face 在#fixed 下)。 Check out this fiddle for example .

快速查看 even 数据显示 draggable 仅绑定(bind) 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
});