Angular - 元素是否是另一个元素的子元素？

Question

我希望找到一种纯Angular的方式来确定点击的元素是否是另一个元素的子元素。在jQuery中，我会使用has()方法，但除了遍历所有子元素并进行比较外，不确定该如何在Angular中实现。

jQuery:

if($(someelement).has(another)) { };

- cyberwombat

---

你的使用场景是什么？ - Josh David Miller

我正在重新编写Bootstrap clickover（漂亮的弹出框）插件。 我需要确定是否单击了body，但要检查是否单击了popover自身。 尝试实现任意位置点击关闭功能。 在上面的代码中，'someelement'是element popover div - 'another'是来自body click function的返回值 - https://github.com/lecar-red/bootstrapx-clickover/blob/master/js/bootstrapx-clickover.js#L76 - 我没有问题检测到body点击，但has()行让我困惑。 - cyberwombat

为什么不直接在$document上添加一个点击处理程序呢？这就是下拉切换的工作方式 - 查看代码 - 并且将其添加到弹出窗口插件中应该非常简单（只需两三行代码）。 - Josh David Miller

你们支持IE < 9吗？ - Fresheyeball

我会看一下下拉菜单 - 我主要是逐行翻译的，所以我会尝试另一种方法。@Fresheyeball - IE <9当然也不错。 - cyberwombat

Answer 1

你可以换个角度思考。

不要问B是否是A的子代，而是问A是否是B的祖先：

function isAncestor(ancestor, element) {
    var parent = element.parentNode;
    while (parent && parent!=ancestor) {
        parent = parent.parentNode;
    }
    return parent==ancestor;
}

- OpherV

Answer 2

我把这个放在这里，因为我正在尝试解决同样的问题，并认为即使它不是has()的严格替代品，对其他人可能有用。

我的第一个解决方案是使用Element.getBoundingClientRect()。

如果你处理的是矩形目标，你可以将点击事件的x和y与element（一个angular.element）的边界矩形进行比较。

$document.bind('click', function(evt) {
    var x = evt.x,
        y = evt.y,
        rect = element[0].getBoundingClientRect();

    if(x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) {
        //you've clicked somewhere in the element
    }
});

IE8+可以正常工作，但5-7版本存在一个小bug

http://www.quirksmode.org/dom/w3c_cssom.html

令人烦恼的是，如果您的元素包含其他不影响其宽度/高度的元素，则该方法将无效。但是，您可以使用这个（略微hacky的）解决方案。

    link: function(scope, element, attrs) {

        var clicked = false;

        element.on('click', eClickHandler);
        $document.on('click', clickHandler);

        function eClickHandler(event) {
            clicked = true;
            $timeout(function() {
                clicked = false;
            });
        }

        function clickHandler(event) {
            if(!clicked) {
                // click occurred outside
            }
        }
    }

- james