Question

我想获取锚标记的id / class /两者，无论它在标记层次结构中的位置。以下示例对于我的目的来说很奇怪但很现实，因为我们的网站是通过我无法控制的CMS访问的。如果人们在不同时间添加多个级别的格式，CMS就会喜欢添加新的span ... ...

所以，有了上述事实，我想按照他们的id / class / both确定特定的锚标签，但我并不总是知道它们在标签深入的位置。

<div id="div_id_A" class="div_class_A">
    <div class="div_class_A">
        <a href="#" id="anchor_id_A" class="anchor_class_A">
            <span class="span_class_A">
                <span id="span_id_B">
                    <span id="span_id_C" class="span_class_C">
                        <p>
                            Click Me
                        </p>
                    </span>
                </span>
            </span>
         </a>
     </div>
</div>

我已经开始这样了，

var dataLayer = dataLayer || [];

document.addEventListener('click', function(event) {
    var telm = event.target.parentNode.className;
    var delm = 'anchor_id_A';
    console.log(telm);
    if (telm == delm) {
        dataLayer.push({
            'youClicked': telm
        });
        console.log(dataLayer);
    };
});

*WHERE: telm = target element; delm = desired element.

澄清。我之所以指定锚是有原因的，不仅仅是为了这个例子。由于我受CMS的限制，我无法进入并为预定义的代码（即模板）添加标记，但我确实需要知道尽可能准确地点击了哪些链接（对于Google Analytics），以便我可以追踪用户忽视，不看或不喜欢的内容。

Answer 1

您可以向上导航层次结构，直到到达锚元素，然后只需读取其ID。

见这里：

var dataLayer = dataLayer || [];

document.addEventListener('click', function(event) {
  var el = event.target;
  while (el.parentElement && el.tagName != 'A') {
    el = el.parentElement;
  }
  dataLayer.push({
      'youClicked': el
  });
  console.log(dataLayer);
  alert(el.id);
});

<div id="div_id_A" class="div_class_A">
  <div class="div_class_A">
    <a href="#" id="anchor_id_A" class="anchor_class_A">
      <span class="span_class_A">
        <span id="span_id_B">
          <span id="span_id_C" class="span_class_C">
            <p>Click Me</p>
          </span>
        </span>
      </span>
    </a>
  </div>
</div>

Answer 2

你想要实现的目标可能是这样的：

var dataLayer = [];

document.addEventListener('click', function(event) {
    var needle = 'anchor_class_A'; // The class of the element you're looking for
    var closest = event.target.closest("." + needle);
    if(closest && closest.id) {
        dataLayer.push({
            'youClicked': closest.id
        });
        alert(JSON.stringify(dataLayer, null, '\t'));
    }
});

<div id="div_id_A" class="div_class_A">
    <div class="div_class_A">
        <a href="#" id="anchor_id_A" class="anchor_class_A">
            <span class="span_class_A">
                <span id="span_id_B">
                    <span id="span_id_C" class="span_class_C">
                        <p class="clicker">
                            Click Me
                        </p>
                    </span>
                </span>
            </span>
         </a>
     </div>
    <div class="div_class_A">
        <a href="#" id="anchor_id_X" class="anchor_class_A">
            <span class="span_class_A">
                <span id="span_id_Y">
                    <span id="span_id_Z" class="span_class_C">
                        <p class="clicker">
                            Click Me
                        </p>
                    </span>
                </span>
            </span>
         </a>
     </div>
</div>

如何获取锚标记的ID，无论它在层次结构中的位置如何？

2 个答案: