javascript - 获取多个 touchend 事件 javascript

Question

我在 ul 的 li 之间使用拖放操作。代码在桌面版本上运行良好。

<ul>
 <li> A </li>
 <li> A </li>
 <li> C </li>
 <li> D </li>
 <li> E </li>
</ul>

但是对于移动版本，我得到了多个触摸端

li.addEventListener('touchstart', touchStart);
li.addEventListener('touchmove', touchMove);
li.addEventListener('touchend', touchEnd);

这就是为什么我无法在我所在的位置获得正确的元素。如何获取手机中正确的最后一个触摸元素？

Answer 1

发布如何向 li 元素添加事件监听器。并考虑下面的代码

var li=document.querySelectorAll('li');
	
	for(var i=0;i<li.length; i++){

	  li[i].addEventListener('touchstart', function(e){
			console.log('Start '+e.target.id);
			});
	
		li[i].addEventListener('touchmove', function(e){
			console.log('Move '+e.target.id);
			});

		li[i].addEventListener('touchend', function(e){
			console.log('End '+e.target.id);
			});			
	}

<ul>
  <li  id='li1'>One</li>
  <li id='li2'>Two</li>
  <li id='li3'>Three</li>
  <li id='li4'>Four</li>
</ul>