事件委托，Event.target与Event.currentTarget的区别

Question

事件委托，Event.target与Event.currentTarget的区别

5

在 MDN Event.target 参考文档中，有一个关于实现事件委托的示例:

事件委托示例

// Assuming there is a 'list' variable containing an instance of an  
// HTML ul element.
function hide(e) {
    // Unless list items are separated by a margin, e.target should be  
    // different than e.currentTarget
    e.target.style.visibility = 'hidden';
}

list.addEventListener('click', hide, false);

// If some element (<li> element or a link within an <li> element for  
// instance) is clicked, it will disappear.
// It only requires a single listener to do that

示例中不清楚的部分

我在示例中不理解的是这个注释：

// Unless list items are separated by a margin, e.target should be  
// different than e.currentTarget

问题

如何使用 <li> 元素上的 margin 区分 Event.target 和 Event.currentTarget？

- maljukan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1106925 · Accepted Answer

请注意，根据MDN Event.currentTarget reference所述，event.target与event.currentTarget的区别在于：

如果没有边距，则不可能直接单击

元素将完全填充其空间。

如果存在边距，则至少可以单击

event.target

event.currentTarget

function hide(e) {
    document.querySelector("pre").textContent += 'e.target = ' + e.target.nodeName + ", e.currentTarget = " + e.currentTarget.nodeName + "\n";
}

document.querySelector("#list").addEventListener('click', hide, false);

ul {
  border: 2px solid orange;
}
li {
  padding: 10px;
  color: blue;
  margin: 30px;
  border: 1px dashed blue;
}

<pre></pre>
<ul id="list">
  <li>click me
  <li>click me
  <li>click me
</ul>