Question

我需要找到一种方法来选择视口中两点之间的所有内容。我也需要选择来交叉HTML元素。

考虑一个带有两个可移动框的页面。这些框由用户围绕内容移动。它们完全位于所有内容前面的屏幕上。当移动框时，我需要选择它们之间的所有内容。有没有人遇到类似的东西？我本来想做的就是模仿智能手机选择手柄。

我知道有一个javascript函数document.elementFromPoint（x，y）。在这种情况下，这不会起作用，因为这些框将被选为最重要的元素。

Answer 1

var leftBound = Math.min(point1.x, point2.x);
var rightBound = Math.max(point1.x, point2.x);
var topBound = Math.min(point1.y, point2.y);
var bottomBound = Math.max(point1.y, point2.y);

$(".").filter(function(x) {
    var offset = $(this).offset();
    var top=offset.top, bottom=top+$(this).height;
    var left=offset.left, right=left+$(this).width;
    var corners = [[left,top], [left,bottom], [right,top], [right,bottom]];

    function inBox(point) {
        var x=point[0], y=point[1];
        return (leftBound<=x && x<=rightBound) && (topBound<=y && y<=bottomBound)
    }

    // overlap-based selection policy
    //   selects if one or more corners is in selection
    return corners.some(inBox);

    // overlap-based selection policy #2
    //   selects if any part of element is in selection
    return corners.some(inBox) //|| ... slightly more complicated logic

    // only-wholly-enclosed selection policy
    //   selects only if entire element is in selection
    return corners.every(inBox);
})

如果您不想使用jQuery，请使用您最喜欢的基于递归回调的DOM遍历方法替换$(".")。

Answer 2

对于WebKit和Opera，您可以按如下方式执行此操作：

获取拖动手柄的坐标
隐藏拖动手柄
在每个拖动句柄上调用document.caretPositionFromPoint(dragHandleX, dragHandleY)
从上一步获得的两个插入符号位置（每个位置包含一个节点和该节点内的偏移量）创建一个新范围
选择此范围
取消隐藏拖动手柄

在Firefox中，鼠标事件具有可能有用的rangeParent和rangeOffset属性，但我认为您需要以某种方式隐藏事件触发前的拖动控制柄。

在IE中，您可以这样做：

获取拖动手柄的坐标
隐藏拖动手柄
使用document.body.createTextRange()
在每个TextRange上调用moveToPoint(dragHandleX, dragHandleY)
使用setEndPoint()将第一个TextRange延伸到第二个TextRange：firstTextRange.setEndPoint(secondTextRange)
选择此范围：firstTextRange.select()
取消隐藏拖动手柄

Answer 3

从它的声音中，最好自己跟踪元素位置并计算从javascript代码中触摸的元素。这将减少您与DOM的互动。

如果不是我听说或用于从其他人那里获取元素的唯一方法，请在此处详述： http://www.vinylfox.com/forwarding-mouse-events-through-layers/

它主要涉及隐藏暂时接收原始元素的元素，然后使用elementFromPoint（）来查找下面的元素。在您的情况下，您可以在两个框之间执行此操作并重复，直到您点击包含元素。如果你有一个大面积和大量的元素，这可能是太资源密集。

我只是在我想要隐藏顶部元素的情况下才使用它，但你可以测试它是否有可见的显示扭曲。

如何使用javascript选择视口中两点之间的所有内容？

3 个答案: