Javascript 可以通过可移动的div单击吗？

我正在开发一些jQuery/JavaScript，它可以拖拽一个div，同时可以操作页面上的其他div（特别是图像）。可移动div基本上是一个透明矩形，用于模拟镜头。我遇到的问题是，我无法理解如何将单击传递到movable div下面的图像。我已阅读了指针事件CSS属性，并尝试将movable div的属性设置为“无”，但这会使movable div不再可移动。有没有一种方法可以让我在移动div的同时让它保持移动

编辑：对于所有询问我当前代码的人，以下是我迄今为止拥有的JavaScript：

<script>
$(document).ready(function(){

$('img').click(function(e) {
  $(document).unbind('keypress');
  $(document).keypress(function(event) {
    if ( event.which == 115) {
      $(e.target).css('width', '+=25').css('height', '+=25');
    };

    if ( event.which == 97) {
      $(e.target).css('width', '-=25').css('height', '-=25');
    };
  });
});

//code to drag the lens around with the mouse
$("#draggableLens").mousemove(function(e){

  var lensPositionX = e.pageX - 75;
  var lensPositionY = e.pageY - 75;

  $('.lens').css({top: lensPositionY, left: lensPositionX});

});
});
</script>

$（文档）.ready（函数（）{
$（'img'）。单击（函数（e）{
$（文档）。解除绑定（“按键”）；
$（文档）.按键（功能（事件）{
if（event.which==115）{
$（e.target）.css（'width'，'+=25'）。css（'height'，'+=25'）；
};
if（event.which==97）{
$（e.target）.css（'width'，'-=25'）.css（'height'，'-=25'）；
};
});
});
//用鼠标拖动镜头的代码
$（“#拖动镜头”）.mousemove（函数（e）{
变量lensPositionX=e.pageX-75；
变量lensPositionY=e.pageY-75；
$（'.lens'）.css（{top:lensPositionY，left:lensPositionX}）；
});
});

我创建了一个演示，它是使用

document.element frompoint

来定位可移动元素所在的最近图像的概念验证。我使用jQueryUI Dragable简化事件处理

使用

document.elementFromPoint

的诀窍在于，必须将要拖动的元素隐藏足够长的时间以查找其他元素，否则拖动的元素本身就是最近的元素

将

active

类添加到最近的元素允许单击查看器访问活动元素

演示代码使用

LI

标记，而不是

IMG

var $images = $('#list li');
timer = false;
$('#viewer').draggable({
    drag: function(event, ui) {
        if (!timer) {
            timer = true;
            var $self = $(this);
            /* use a timeout to throttle checking for the closest*/
            setTimeout(function() {
                /* must hide the viewer so it isn't returned as "elementFromPoint"*/
                $self.hide()
                var el = $(document.elementFromPoint(event.pageX, event.pageY));                    
                $('.active').removeClass('active');
                if ($el.is('li')) {
                    $el.addClass('active')
                }
                $self.show()
                timer = false;
            }, 100);
        }
    }
}).click(function() {
    if ($('.active').length) {
        msg = 'Clicked on: ' + $('.active').text();

    } else {
        msg = 'Click - No active image';
    }
    $('#log').html(msg + '<br>');

})

var$images=$（'#list li'）；
定时器=假；
$（'#查看器'）。可拖动({
拖动：函数（事件、ui）{
如果（！计时器）{
定时器=真；
var$self=$（本）；
/*使用超时限制检查最近的时间*/
setTimeout（函数（）{
/*必须隐藏查看器，以便它不会作为“elementFromPoint”返回*/
$self.hide（）
var el=$（document.elementFromPoint（event.pageX，event.pageY））；
$（'.active'）.removeClass（'active'）；
如果（$el.is（'li'））{
$el.addClass（'active'）
}
$self.show（）
定时器=假；
}, 100);
}
}
})。单击（函数（）{
如果（$（'.active'）.length）{
msg='单击：'+$（'.active'）.text（）；
}否则{
msg='单击-无活动图像'；
}
$（'#log'）.html（msg+'
'）；
})

演示：

---

document.elementFromPoint

在旧浏览器中不受支持。您还可以使用jQuery

position

或

offset

方法将元素的坐标与查看器的当前位置进行比较，以实现完全的浏览器兼容性

您是如何想象的？你拖动你的镜头，点击会在哪里？也许如果movable

div

有一个处理程序，例如easydrag插件允许你设置一个处理程序，而不是拖动整个

div

我不太明白你如何可以同时拖动和点击，但你可能正在寻找这样的东西：movablediv.click（函数（e）{$（document.elementFromPoint（e.pagex，e.pagey））.click（）；}）在你的问题中添加相关的html和脚本，你能显示它的屏幕截图吗？你的帖子给了我一个想法，最终解决了我的问题。非常感谢！我想知道什么是解决方案。这个问题很有趣