获取javascript事件到被掩盖的对象

我正在尝试构建一个具有固定图像和第二个可拖动图像的jQuery应用程序.我需要固定图像以在可移动图像的顶部显示z索引-固定图像是一张带有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()正常工作？我能以某种方式获取固定图像而不只是捕获事件吗？还是我需要手工编写自己的可拖动机制？

解决方法:

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

快速查看偶数数据后发现,可拖动仅绑定鼠标按下,因此这似乎是唯一需要中继的事件.

$('#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
});

标签：jquery-ui,events,javascript,jquery
来源： https://codeday.me/bug/20191208/2094201.html