事件委托和数据属性，点击元素文本时为空答案

【问题标题】：Event delegation and data attribute, null when clicking on element's text事件委托和数据属性，点击元素文本时为空
【发布时间】：2017-01-12 17:04:09
【问题描述】：

我有一个主 div，里面有一些分配了数据值的内部 div。我不知道是不是因为我使用的是 Bootstrap 或 div 结构，但是当我单击实际数字（如按钮中心）时，我得到“null”，单击数字外部，给出所需结果。我尝试将数字放在 p 标签内并在那里分配数据值，但随后我得到整个按钮的“null”。

如何点击 div 内的文本并获取它们的值？

你可以在这里看到实际的问题（忽略操作数按钮，7 在我运行测试时总是返回 null）：

https://jsfiddle.net/chuLmpoy/

HTML

<div class="container">

    <div class="row output">
      <div class="col-xs-12">
        <div>
          <p id="totalNumber"> <strong> </strong> </p>
        </div>
      </div>
      <!--col-xs-12-->
    </div>
    <!--rowOutput-->

    <div class="row1">
      <div class="col-xs-3 transparent"> <strong> 7 </strong> </div>
      <div class="col-xs-3 transparent"><strong> 8 <strong></div>
    <div class="col-xs-3"><strong> <- <strong></div>
    <div class="col-xs-3"><strong> C <strong></div>
  </div><!--row1-->


  <div class="row1">
    <div class="col-xs-3 number"> <p data value="7"><strong>7 </strong> </p></div>
      <div class="col-xs-3 number" data-value="8"><strong> 8 <strong></div>
    <div class="col-xs-3 number" data-value="9"><strong> 9 <strong></div>
    <div class="col-xs-3"><strong> / <strong></div>
  </div><!--row1-->

   <div class="row1">
    <div class="col-xs-3 number"data-value="4"><strong> 4 </strong> </div>
      <div class="col-xs-3 number" data-value="5"><strong> 5 <strong></div>
    <div class="col-xs-3 number" data-value="6"><strong> 6 <strong></div>
    <div class="col-xs-3"><strong> * <strong></div>
  </div><!--row1-->

      <div class="row1">
    <div class="col-xs-3 number" data-value="1"><strong> 1 </strong> </div>
      <div class="col-xs-3 number" data-value="2"><strong> 2 <strong></div>
    <div class="col-xs-3 number" data-value="3"><strong> 3 <strong></div>
    <div class="col-xs-3"><strong> - <strong></div>
  </div><!--row1-->

       <div class="row1">
    <div class="col-xs-3 number"  data-value="0"><strong> 0 </strong> </div>
      <div class="col-xs-3"><strong> . <strong></div>
    <div class="col-xs-3"><strong> + <strong></div>
    <div class="col-xs-3"><strong> = <strong></div>
  </div><!--row1-->

  </div><!--container-->

</body>

"use strict";


const numbers = document.querySelector(".container");

numbers.addEventListener("click", getEachValue);

function getEachValue(e){

  let clickedValue = e.target.getAttribute('data-value');
  console.log(clickedValue);
  }

【问题讨论】：

标签： javascript event-bubbling event-delegation

【解决方案1】：

e.target 是strong 元素。您需要检查并使用.parentNode 遍历其父级。

let button = e.target.nodeName === "STRONG" ? e.target.parentNode : e.target
let clickedValue = e.target.getAttribute("data-value")

或者更好的是，完全放弃 strong 元素，并使用 CSS 设置样式。

另请注意，您的许多strong 结束标记都缺少/。

一般来说，拥有一个从元素向上遍历以搜索与选择器匹配的祖先的函数会很有用。

function up(el, sel, stopEl) {
  while ((el = el.parentElement) && !el.matches(sel)) {
    if (stopEl && el === stopEl) {
      return null
    }
  }

  return el
}

这个函数需要一个元素和一个选择器，从元素开始向上遍历祖先，返回匹配选择器的第一个祖先。

还有一个可选的第三个参数，您可以传递它来让遍历在到达某个元素时停止。如果您不想越过绑定处理程序的元素，这将很有用。

在你的情况下，你可以这样使用它：

let button = up(e.target, "div[data-value]", this)

【讨论】：

是的，只需删除 strong 标签即可。谢谢。

【解决方案2】：

点击事件的目标是基于你点击的位置，所以这取决于你点击的是强元素还是div。

解决办法是确保所有可能的点击情况都被条件覆盖，如果点击strong会读取父节点的data属性，点击div时直接读取div等的attr。

当您的元素中有多个嵌套时，这会变得相当复杂。

在您的情况下，最简单的做法是摆脱 CSS 中的强项并使用样式。

【讨论】：