Does e.target work differently on mobile?

Question

I have noticed that when I was debugging with the devtools and set it to the screen to be mobile, e.target was detecting the parent divs(especially the ones' display is flex) instead of the children are visible and clickable. When it is just a computer screen mode, it works fine and works as it should.

Is this normal? Is there a way to work around it?

Here is my code:

<div class="top">
      <div class="list-container clicked__clue" id="books">
        <ul class="list">
          <li class="list-item book_4" draggable="true">
            <p class="list-item-name">기이현상청 사건일지</p>
          </li>
          <li class="list-item book_1" draggable="true">
            <p class="list-item-name">맨 끝줄 소년</p>
          </li>
          <li class="list-item book_5" draggable="true">
            <p class="list-item-name">억지로라도 쉬어가라</p>
          </li>
          <li class="list-item book_3" draggable="true">
            <p class="list-item-name">로펌 인 코리아</p>
          </li>
          <li class="list-item book_7" draggable="true">
            <p class="list-item-name">거미 여인의 키스</p>
          </li>
          <li class="list-item book_6" draggable="true">
            <p class="list-item-name">을사늑약 1905</p>
          </li>
          <li class="list-item book_9" draggable="true">
            <p class="list-item-name">다른 방식으로 보기</p>
          </li>
          <li class="list-item book_2" draggable="true">
            <p class="list-item-name">발이 없는 나의 여인은 노래한다</p>
          </li>
          <li class="list-item book_8" draggable="true">
            <p class="list-item-name">닐과 순다리</p>
          </li>
        </ul>
      </div>
    </div>

.list-container {
    background: #f9e2c3;
    position: relative;
    margin: auto;
}

.list {
    list-style-type: none;
    margin: 0;
    padding: 1rem;
    font-size: 1.5rem;
}

.list-item {
    display: flex;
    float: left;
    align-self: baseline;
    padding: 1rem;
    text-orientation: upright;
    writing-mode: vertical-lr;
}

.list-item-name {
    font-family: "Consolas";
    user-select: none;
}

const list = document.querySelector(".list");

let draggedTarget;
let helper;
document.addEventListener("dragstart", function(e) {
  draggedTarget = e.target;

  helper = document.createElement("div");
  helper.innerText = draggedTarget.querySelector(".list-item-name").innerText;
  helper.style.position = "absolute";
  helper.style.top = "-9999px";
  helper.style.padding = "1rem";
  helper.style.backgroundColor = "#000";
  helper.style.color = "#ddd";
  helper.style.fontSize = "1.5rem";
  helper.style.fontFamily = "Consolas";
  document.querySelector(".top").appendChild(helper);
  
  e.dataTransfer.setDragImage(helper, 0, -30);
});

document.addEventListener("dragenter", function(e) {
    
    if (e.target !== draggedTarget && e.target.classList[0] === "list-item") {
        const ep = e.target.previousElementSibling;
        const en = e.target.nextElementSibling;
        const dp = draggedTarget.previousElementSibling;
        const dn = draggedTarget.nextElementSibling;

        if (!ep && !dn) {
            list.removeChild(draggedTarget);
            e.target.insertAdjacentElement("beforebegin", draggedTarget);
        } else if (!en && !dp) {
            list.removeChild(draggedTarget);
            e.target.insertAdjacentElement("afterend", draggedTarget);
        } else if (ep && ep != draggedTarget) {
            list.removeChild(e.target);
            list.removeChild(draggedTarget);
            ep.insertAdjacentElement("afterend", draggedTarget);
            draggedTarget.insertAdjacentElement("afterend", e.target);
        } else if (!ep) {
            list.removeChild(e.target);
            list.removeChild(draggedTarget);
            dn.insertAdjacentElement("beforebegin", e.target);
            e.target.insertAdjacentElement("beforebegin", draggedTarget);
        } else if (en && en != draggedTarget) {
            list.removeChild(e.target);
            list.removeChild(draggedTarget);
            en.insertAdjacentElement("beforebegin", draggedTarget);
            draggedTarget.insertAdjacentElement("beforebegin", e.target);
        } else if (!en) {
            list.removeChild(e.target);
            dp.insertAdjacentElement("afterend", e.target);
        }
  } 
});

document.addEventListener("dragover", function(e) {
  e.preventDefault(); // why necessary ?
});

document.addEventListener("drop", function(e) {
  e.preventDefault();
  helper.parentNode.removeChild(helper);
});