使用jQuery检测两个div是否相互穿越

Question

你好，我正在与以下问题挣扎：

我已经制作了一个小样例来尝试展示我想做的事情。

http://jsfiddle.net/4F4f8/2/

当红线经过蓝线时，我希望获取红线的数据属性注释。我正在尝试使用jQuery closest 来检测最接近的div，如下所示。

var count = 1; 
setInterval(function(){

    leftPixels = count++;
    console.log(leftPixels);
    $('.scruber').css('left','-' + leftPixels * 10 + 'px');

    var markerData = $('.eventLine').closest('.marker').data('comment');

    $('.output').html(markerData);
    console.log(markerData);

},1000);

我需要帮助解决编程问题，非常感谢您的协助。

谢谢。

- user1734993

---

jQuery的.closest（或者任何jQuery中的内容，因为它是一个DOM库而不是游戏引擎）并不能检测屏幕上物理上最接近的元素。它获取与给定过滤器匹配的最近的父元素或元素本身。 - Esailija

好的，谢谢Esailija，最好使用哪个函数？ - user1734993

除非你能找到已经编写好的js库，否则没有函数可以完成这个任务。编写一个函数，获取abs(blueline.left - redline.left)的值并返回差异最小的元素。 - Reinstate Monica Cellio

Answer 1

你可以使用 document.elementFromPoint(x, y) 来实现这个功能。以下是一个例子。

在 Chrome 上测试过：

http://jsfiddle.net/4F4f8/18/

var getElementBelowMe = function($me) {
    var $below,
        elOffset = $me.offset(),      
        x        = elOffset.left + $me.width() / 2,
        y        = elOffset.top + $me.height() / 2;

    $me.css("visibility", "hidden");
    $below = document.elementFromPoint(x, y);
    $me.css("visibility", "");
    return $below;
}

var count = 1; 
setInterval(function(){

    leftPixels = count++;
    var scruber = $('.scruber');
    scruber.css('left','-' + leftPixels * 10 + 'px');

    var eventLine = $('.eventLine');

    var markerData = getElementBelowMe(eventLine);
    if(markerData && $(markerData).hasClass("marker")) {
        var txt = "Passing " + $(markerData).data("comment");
        console.log(txt);
        $(".output").append(txt + "<br />");
    }

},100);

然而，您必须记住以下几点：

• 该示例通过查找事件行的中心并检查下方来工作。这在您当前的设置中有效，但如果您的checkPoints更窄，eventLine - 更宽，则可能会失败。
• elementFromPoint支持在不同的浏览器中有些错误或者说不同（http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html#link2）。
• 我在示例中使用visibility，因为display:none实际上可能会改变其他元素的位置，从而提供意外的结果，但您可以更好地处理它，进行测试..
• 将标记的坐标存储在某个结构中，并检查哪个是最接近的，正如@Archer在评论中提出的那样，可能是更好的解决方案。

- NoBBy