检测外部组件的点击

要检测外部组件的点击，可以使用以下方法：

1. 使用事件委托（Event Delegation）：事件委托是一种将事件处理程序绑定到其父元素上的技术。通过将事件处理程序绑定到父元素，可以监听子元素的事件，并捕获点击事件。

document.addEventListener('click', function(event) {
  if (!event.target.closest('.external-component')) {
    console.log('点击了外部组件');
  }
});

上述代码中，我们将点击事件绑定到了document元素上，并使用event.target.closest('.external-component')来判断点击事件的目标元素是否为外部组件。如果不是外部组件，则输出"点击了外部组件"。

2. 使用事件冒泡（Event Bubbling）：事件冒泡是指当一个元素上的事件被触发时，其父元素也会依次触发相同类型的事件。通过在外部组件的父元素上监听点击事件，并阻止事件冒泡，可以实现检测外部组件的点击。

var externalComponent = document.querySelector('.external-component');
externalComponent.addEventListener('click', function(event) {
  event.stopPropagation();
});

document.addEventListener('click', function() {
  console.log('点击了外部组件');
});

在上述代码中，我们首先获取外部组件的元素，并在其上绑定点击事件。在点击事件处理程序中，使用event.stopPropagation()来阻止事件冒泡。然后，在document元素上监听点击事件，并输出"点击了外部组件"。

这些方法都可以用来检测外部组件的点击，具体使用哪种方法取决于你的项目需求和组件结构。