Javascript / Adob e DTM：跟踪复选框仅点击一次

Posted 2021-05-03

首先，像往常一样，对不起，如果这个答案存在，但我搜索了，找不到我正在寻找的答案。

我试图仅在输入复选框上跟踪一次操作，也就是说，如果我有一个复选框列表，我只想跟踪用户是否只点击一次，那么即使他们取消选择一个chackbox，他们也只检查了第一个点击跟踪。

我知道有一种方法可以通过“querySelector（）。input”类型调用来检查是否已经在JS中单击了一个复选框，但是我很遗憾如何将该完整的圆圈仅仅跟踪事件触发一次，而不管如何很多时候用户切换它。

考虑以下标记：

  <li class="js-form-item form-item form-item__item form-item--checkbox__item">
    <span class="checkbox"> 
      <input view_id="explore" display_id="explore_main" data-drupal-selector="edit-category-title-app" type="checkbox" id="edit-category-title-app" name="category[title_app]" value="title_app" class="form-checkbox form-item__textfield">
        <label for="edit-category-title-app" class="checkbox__label">
          <span class="checkbox__faux"></span><span class="form-item__label">App</span>
        </label>
     </span>
</li>

任何帮助将不胜感激。请给我香草JS。谢谢。

答案

附加事件侦听器并在触发时将其删除。

function addEventListenerOnce(target, type, listener) {
    target.addEventListener(type, function fn(event) {
        target.removeEventListener(type, fn);
        listener(event);
    });
}

addEventListenerOnce(document.getElementById("edit-category-title-app"), "change", function (event) {
    alert("You'll only see this once!");

    // DTM call here
});

看到这个post