Vanilla JS:捕获包装元素点击，但不捕获其子元素

Vanilla JS是指纯粹的JavaScript，即不依赖任何框架或库的原生JavaScript。在处理捕获包装元素点击但不捕获其子元素的需求时，可以使用以下方法：

1. 事件委托（Event Delegation）：通过将事件监听器绑定到父元素上，利用事件冒泡的特性来捕获子元素的点击事件。然后通过判断事件的目标元素是否为所需的包装元素，来执行相应的操作。这样可以避免为每个子元素都绑定事件监听器，提高性能和代码的可维护性。

示例代码如下：

var parentElement = document.getElementById('parentElement');

parentElement.addEventListener('click', function(event) {
  var targetElement = event.target;
  
  // 判断目标元素是否为包装元素
  if (targetElement.classList.contains('wrapper')) {
    // 执行操作
    console.log('点击了包装元素');
  }
});

在上述代码中，我们通过addEventListener方法将点击事件监听器绑定到父元素parentElement上。当点击事件发生时，通过event.target获取到实际被点击的元素，然后通过判断该元素是否具有名为wrapper的CSS类来确定是否为包装元素。

1. 使用事件对象的currentTarget属性：在事件处理函数中，可以使用事件对象的currentTarget属性来获取当前正在处理事件的元素，而不是实际被点击的元素。通过判断currentTarget是否为所需的包装元素，来执行相应的操作。

示例代码如下：

var wrapperElement = document.getElementById('wrapperElement');

wrapperElement.addEventListener('click', function(event) {
  var currentElement = event.currentTarget;
  
  // 判断当前元素是否为包装元素
  if (currentElement === wrapperElement) {
    // 执行操作
    console.log('点击了包装元素');
  }
});

在上述代码中，我们通过addEventListener方法将点击事件监听器绑定到包装元素wrapperElement上。当点击事件发生时，通过event.currentTarget获取到当前正在处理事件的元素，然后通过判断该元素是否与包装元素相等来确定是否为包装元素。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。产品介绍链接
• 腾讯云云函数（SCF）：无服务器计算服务，支持事件驱动的函数计算。产品介绍链接
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
• 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
• 腾讯云物联网（IoT）：提供全面的物联网解决方案，支持设备连接、数据管理、应用开发等。产品介绍链接
• 腾讯云区块链（BCS）：提供安全、高效的区块链服务，支持快速搭建和管理区块链网络。产品介绍链接
• 腾讯云视频处理（VOD）：提供视频上传、转码、截图、水印等功能，满足视频处理需求。产品介绍链接

以上是对Vanilla JS捕获包装元素点击但不捕获其子元素的完善且全面的答案，希望能对您有所帮助。