3

嗨，我正在努力解决以下问题

我已经敲了一个小样本来尝试展示我正在尝试做的事情。

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

我想要发生的是当红线越过蓝线时得到红线数据属性注释。

我正在尝试使用最接近的 jquery 来检测最接近的 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);

非常感谢一些帮助

谢谢

4

1 回答 1

0

您可以使用 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）。
  • 我在示例中使用了可见性，因为显示：无，实际上可以改变其他元素的位置，从而提供意想不到的结果，但你可以更好地使用它，测试..
  • 在某些结构中具有标记坐标并检查哪个最接近@Archer 在评论中提出的建议可能是更好的解决方案
于 2012-10-10T14:22:55.830 回答