避免事件.Target指的是子进程而不是父进程

Avoid event.target refer to the child instead of parent

本文关键字：子进程 进程 事件 Target      更新时间：2023-09-26

我试图获得数据属性一组链接和按钮，创建一个事件监听器如下:

// For all major browsers, except IE 8 and earlier
if (document.addEventListener) {                 
    document.addEventListener("click", executeOnClick);
} else if (document.attachEvent) {   
    // For IE 8 and earlier versions
   document.attachEvent("onclick", executeOnClick);
}

事件监听器，执行下一个函数:

function executeOnClick(e){
    //////////// Only elements which has "specialClass"
    if (hasClass(e.target, 'specialClass')) {
        if(e.target !== undefined){
            console.info(e.target.getAttribute('data-info'));
            e.preventDefault();
        }
    }
}

但是当链接或按钮里面有其他标签时不起作用。例子:

<a data-info="Lorem ipsum 3!" href="#" class="specialClass">
  <div>Link with div inside: <br> "event.target" is "div", not "a"</div>
</a>

我不知道如何得到它的工作，当元素有和没有孩子。有人能帮帮我吗?

我的问题:http://codepen.io/tomloprod/pen/gwaVXE

注意:我省略了hasClass方法的定义，因为这不是问题所在。无论如何，你可以在codepen上看到它。

您可以使用一个函数来递归地检查parentNode是否存在data-info属性。

下面是一个例子。

//////////// This function works well.
function findParentWithData(elem) {
  try {
    if(elem.getAttribute('data-info'))
      return elem;
  } catch(e) {
    console.log('This was an anchor without data-info attribute.')
    return e
  }
  while(!elem.getAttribute('data-info')) {
    return findParentWithData(elem.parentNode);
  }
}
function hasClass(event, className) {
  if (event.classList) {
    return event.classList.contains(className);
  }
  return new RegExp('(^| )' + className + '( |$)', 'gi').test(event.className);
}
function executeOnClick(e) {
  // if click came from body don't do anything
  if (e.target === document.body) return;
  var result = document.getElementById("result");
  result.innerHTML = "";
  //////////// Only elements that has "specialClass"
  // find parent with data-info
  var elem = findParentWithData(e.target)
  if (elem instanceof Element && hasClass(elem, 'specialClass')) {
    if(elem !== undefined){
      result.innerHTML = "Information: " + elem.getAttribute('data-info');
      e.preventDefault();
    }
  }
}
// For all major browsers, except IE 8 and earlier
if (document.addEventListener) {
  document.addEventListener("click", executeOnClick);
} else if (document.attachEvent) {   
  // For IE 8 and earlier versions
  document.attachEvent("onclick", executeOnClick);
}
.btn {
  opacity:0.8;
  border:0;
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 37px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  outline:0;
  margin: 0em 0 1em 0;
  display: -webkit-inline-box;
}
.btn:hover {
  cursor:pointer;
  opacity:1;
  text-decoration: none;
}
.btn.red{
  background:#e74c3c;
}
.btn.green{
  background:#2ecc71;
}
<div id="result"></div>
<a data-info="Lorem ipsum!" href="#" class="btn green specialClass">Link: Working well</a>	
<button data-info="Lorem ipsum 2!" class="btn green specialClass">Button: Working well too</button>
<a data-info="Lorem ipsum 3!" href="#" class="btn red specialClass">
  <div>Link with div inside: <br> Doesn't work</div>
</a>
<a data-info="Lorem ipsum 4!" href="#" class="btn red specialClass">
  <ul>
    <li>   
      Link with ul inside: 
    </li>
    <li>
      Doesn't work
    </li>
  </ul>
</a>
<a href="#" class="btn red">Foo</a>

相关文章：