Question

在页面的源代码中，页面的不同部分有4次唯一的外部链接。

我想触发哪个点击用户点击了，因为在它之前的某行有一个id我想在用户点击特定链接时将其保存到变量。

一个简单的例子：

<div class="mydiv">
<p id="id1">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id2">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id3">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

如何检查用户是否点击id为id2的第二个链接并将其保存到变量等？在我的页面中还有其他href，但我只想检查具体情况。

Answer 1

您可以轻松地处理click事件：

var list = document.querySelectorAll('a[href="www.outboundlink.com"]');
var index;
for (index = 0; index < list.length; ++index) {
    list[index].addEventListener("click", handleClick, false);
}

然后在处理程序中，反复使用parentNode查找.mydiv，然后找到带有id的段落：

function handleClick() {
    var mydiv = this.parentNode;
    var p;
    while (mydiv && !/\bmydiv\b/.test(mydiv.className)) {
        mydiv = mydiv.parentNode;
    }
    if (mydiv) {
        p = mydiv.querySelector("p[id]");
        if (p) {
            // Use p.id here, it's the ID
        }
    }
}

请注意，处理完点击后，您所在的页面将被拆除并替换为关注链接的结果。因此，如果您将ID读取到变量，则需要立即对其进行操作（例如将其置于本地存储中）。

另请注意，您的链接可能无效，href="www.outboundlink"是网站中的相对链接。需要http://，https://或//才能转到其他网站。

直播示例：

var list = document.querySelectorAll('a[href="www.outboundlink.com"]');
var index;
for (index = 0; index < list.length; ++index) {
  list[index].addEventListener("click", handleClick, false);
}

function handleClick(e) {
  var mydiv = this.parentNode;
  var p;
  while (mydiv && !/\bmydiv\b/.test(mydiv.className)) {
    mydiv = mydiv.parentNode;
  }
  if (mydiv) {
    p = mydiv.querySelector("p[id]");
    if (p) {
      // Use p.id here, it's the ID
      alert("The ID is " + p.id);
    }
  }
  e.preventDefault(); // Just for demonstration purposes
}

<div class="mydiv">
  <p id="id1">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id2">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id3">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

与许多DOM遍历一样，使用像jQuery这样的DOM包装器库可以更简单：

$('a[href="www.outboundlink.com"]').on("click", function() {
    var id = $(this).closest(".mydiv").find("p[id]").attr("id");
    alert("The ID is " + id); // will be undefined if not found
});

$('a[href="www.outboundlink.com"]').on("click", function() {
  var id = $(this).closest(".mydiv").find("p[id]").attr("id");
  alert("The ID is " + id);
  return false; // Just for demonstration purposes
});

<div class="mydiv">
  <p id="id1">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id2">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>

<div class="mydiv">
  <p id="id3">test
    <p>
      <p></p>
      <p></p>
      <p></p>
      <div> <a href="www.outboundlink.com"> click </a> 
      </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

这是另一种方法。如果您无法控制已创建的元素并且绑定变得棘手，则可以使用委派来避免向上遍历DOM。

＆＃13;

var divs = document.querySelectorAll('.mydiv');
Array.prototype.forEach.call(divs, function(div){
  div.addEventListener('click', function(e){
    if(e.target.tagName === 'A' && div.querySelector('p#id2')){
      alert('Found id2');
      }
    });
  });

＆＃13;

<div class="mydiv">
<p id="id1">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id2">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

<div class="mydiv">
<p id="id3">test<p>
<p></p>
<p></p>
<p></p>
<div> <a href="www.outboundlink.com"> click </a> </div>
</div>

＆＃13;

从同一链接中获取不同的ID单击

2 个答案: