使用父元素获取event.target值

Question

在我的项目中，我有4个div并获得第4个div值，我必须这样做：

event.target.parentElement.parentElement.parentElement.parentElement.value

因此，当我更改任何UI更改时，值引用将丢失，应用程序崩溃。

有没有其他替代解决方案可以摆脱这种方法并获得价值，无论用户界面如何变化。

如图所示，如果我需要获取输入文本框的值，我需要使用event.target从允许的类向下钻取到输入元素。

例如：

event.target.parentElement.parentElement.parentElement.parentElement
            .parentElement.parentElement.querySelector("#Username").value

Answer 1

我建议您使用事件委派来利用冒泡。在这种情况下，您可以使用e.delegateTarget获取父级。

$(function () {
  $('#parent').on('click', '.children', function (e) {
    console.log(e.delegateTarget);
  });
});

#parent {
  width: 300px;
  height: 300px;
  background-color: black;
}

#child-1 {
  width: 200px;
  height: 200px;
  background-color: red;
}

#child-2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

#child-3 {
  width: 50px;
  height: 50px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child-1" class="children">
    <div id="child-2" class="children">
      <div id="child-3" class="children">
      </div>
    </div>
  </div>
</div>