Question

var myContainer: any = null;

<div id="container" ref={container => myContainer = container}>
 <p id="child" > test</p>
</div>

现在我想知道event.target是否在引用内。

document.addEventListener("click", function (event) {

      var target = event.target;

      if(target is inside myContainer){
        console.log("target is inside my container");
      }


  });

Answer 1

我在这里找到了一个好伴侣：

https://codepen.io/blustemy/pen/QdjXaO

基本上您可以替换此行

document.getElementById("flyout-example");

使用ref

'myContainer'

Answer 2

您可以使用contains（）返回布尔值，该布尔值指示节点是否为指定节点的后代。查看下面的示例

var span = document.getElementById("mySPAN");
var div = document.getElementById("myDIV").contains(span);

Answer 3

您可以使用contains检查目标是否在包装器内。试试这样的东西

  document.addEventListener("click", function (event) {
      var target = event.target;
      if(this.myContainer && this.myContainer.contains(target)){
        console.log("target is inside my container");
      }
  });

反应：找出一个元素是否在另一个引用容器中

3 个答案: