javascript - 是否可以通过可移动的div点击？

我正在开发一些jQuery / JavaScript，它可以拖动div并同时能够操纵页面上的其他div（特别是图像）。可移动div基本上是一个透明的矩形，用于模拟镜头。我遇到的问题是我无法弄清楚如何将点击传递到可移动div下方的图像。我已经阅读了指针事件CSS属性，并尝试将可移动div设置为none，但是这使可移动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>

最佳答案

我创建了一个演示，使用document.elementFromPoint来演示概念证明，该演示可找到可移动元素结束的最近图像。我使用可拖动的jQueryUI来简化事件处理。

使用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>');

})

演示：http://jsfiddle.net/nfjjV/4/

较旧的浏览器不支持document.elementFromPoint。您也可以使用jQuery position或offset方法将元素的坐标与查看器的当前位置进行比较，以实现完全的浏览器兼容性

关于javascript - 是否可以通过可移动的div点击？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13427999/