javascript - Angular - 是其他元素的子元素

Question

我正在尝试找到一种纯 Angular 方法来确定单击的元素是否是另一个元素的子元素。在 jQuery 中，我会使用 has() 但不确定在 Angular 中使用哪种方法，除了遍历所有子项并进行比较。

jQuery：

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

Answer 1

你可以反过来。

您可以询问 A 是否是 B 的祖先，而不是询问 B 是否是 A 的孩子：

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

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 有一个小错误

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
            }
        }
    }