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

Question

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

如何单击 div 中的文本并同时获取它们的值？

你可以在这里看到实际问题（忽略操作数按钮，7 总是 return 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。

解决方法是确保点击的所有可能情况都被condition覆盖，点击strong会读取父节点的data属性，点击div时直接读取attr来自 div 等等

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

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

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

Event delegation and data attribute, null when clicking on element's text

javascript

event-bubbling

event-delegation