不要混合原生JavaScript和jQuery，最好使用其中一个。下面是jQuery的解决方案：

$(function() {
  $('.demo li').click(function() {
    let id = $(this).data('id');
    console.log('click on ', id);
  });
});

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  display: inline-block;
  border: 1px solid #222;
}

.item {
  border: 1px solid #222;
  padding: 10px;
}

.item:hover {
  background-color: yellow;
}
.as-console-wrapper { max-height: 20px !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo">
  <li class="item" data-id="11111">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="22222">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="333">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
</ul>

您有一个span元素，它 Package 了li中的所有内容，span是实际的事件目标。
请改用this关键字，该关键字引用事件侦听器附加到的元素。

/*document.addEventListener("click", handle);

const demo = e.target.closest(".demo");
*/
let item = document.querySelectorAll(".item");

for (let i = 0; i < item.length; i++) {
  item[i].onclick = function(e) {
    /*Oh look this is a span*/
    console.log(e.target)
    //Use the "this" keyword intead
    console.log(this.dataset.id)
  };
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo {
  display: inline-block;
  border: 1px solid #222;
}

.item {
  border: 1px solid #222;
  padding: 30px;
}

.item:hover {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="demo">
  <li class="item" data-id="11111">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="22222">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
  <li class="item" data-id="333">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, mollitia! Aspernatur animi similique temporibus quidem ullam officiis distinctio deleniti alias.</span>
  </li>
</ul>