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。

解决方案是确保所有可能的单击条件都包含在条件中，如果单击strong，您将读取父节点的数据属性，当单击div时，您直接从div读取attr等。

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

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

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

2 个答案: