事件委派和数据属性，单击元素文本时为 null

Question

我有一个主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>

.JS

"use strict";

const numbers = document.querySelector(".container");
numbers.addEventListener("click", getEachValue);
function getEachValue(e){
  let clickedValue = e.target.getAttribute('data-value');
  console.log(clickedValue);
  }

Answer 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)

Answer 2

点击事件目标基于点击的位置，因此这取决于您点击的是强元素还是div。

解决方案是确保所有可能的点击情况都被条件所覆盖，如果你点击强，你将读取父节点的数据属性，当点击div时，你直接从div读取attr等。

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

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