点击第三方HTML产品元素时同时打开自定义页面的实现问题

你之前用<a>标签包裹第三方元素无效，是因为第三方脚本会动态生成内部的产品链接元素，这些元素自带跳转逻辑，会覆盖或阻止父级<a>标签的点击行为。以下是两种可行的实现方案：

方案一：事件委托监听（适用于元素已生成的情况） #

通过给第三方代码的容器绑定事件委托，监听内部产品链接的点击，在触发时额外打开反馈页面：

<head>
  <script async defer src="[linkremoved]"></script>
</head>
<body>
  <!-- 原有页面内容 -->
  <div>
    <!-- Partner code -->
    <div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
  </div>
  <!-- 原有页面内容 -->

  <!-- 添加以下脚本 -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取第三方产品容器
      const productContainer = document.querySelector('[data-gyg-href]');
      if (!productContainer) return;

      // 监听容器内的点击事件
      productContainer.addEventListener('click', function(e) {
        // 判断点击的是否是第三方生成的跳转链接（根据实际结构调整选择器，比如a标签）
        const productLink = e.target.closest('a');
        if (productLink) {
          // 打开自定义反馈页面
          window.open('comments.html', '_blank');
        }
      });
    });
  </script>
</body>

方案二：MutationObserver监听动态元素（适用于第三方脚本加载慢的情况） #

如果第三方脚本加载延迟，导致DOMContentLoaded触发时元素还未生成，可以用MutationObserver监听DOM变化，等元素生成后再绑定事件：

<head>
  <script async defer src="[linkremoved]"></script>
</head>
<body>
  <!-- 原有页面内容 -->
  <div>
    <!-- Partner code -->
    <div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
  </div>
  <!-- 原有页面内容 -->

  <!-- 添加以下脚本 -->
  <script>
    const targetSelector = '[data-gyg-href]';
    let productContainer = document.querySelector(targetSelector);

    // 绑定点击事件的函数
    function setupFeedbackOpen(container) {
      container.addEventListener('click', function(e) {
        const productLink = e.target.closest('a');
        if (productLink) {
          window.open('comments.html', '_blank');
        }
      });
    }

    if (productContainer) {
      // 元素已存在，直接绑定
      setupFeedbackOpen(productContainer);
    } else {
      // 监听DOM变化，直到元素生成
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(() => {
          productContainer = document.querySelector(targetSelector);
          if (productContainer) {
            setupFeedbackOpen(productContainer);
            observer.disconnect(); // 停止监听
          }
        });
      });

      // 监听body的子节点变化
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    }
  </script>
</body>

关键说明： #

• 不要阻止默认事件：代码中仅执行window.open，不会干扰第三方链接的原有跳转逻辑。
• 弹窗拦截问题：因为window.open是在用户主动点击的回调中触发，浏览器不会拦截。
• 选择器调整：如果第三方生成的不是<a>标签，可根据实际生成的DOM结构修改e.target.closest()中的选择器。

内容的提问来源于stack exchange，提问作者Moerip