在触摸屏上选择列表项

Selecting a list item on a touch screen

我发现了多个基于或围绕这个问题的话题,但是到目前为止的答案一直没有帮助。我正在尝试通过纯 JavaScript(JQuery 接受)来实现它。

到目前为止,我已经可以正常工作,因此我可以通过计算机上的 Web 浏览器 select 一个项目,但点击事件似乎不适用于触摸屏。我从其他线程尝试了多个 "solutions",例如添加触摸:

$('.List').on('click touch', function () {
// code
});

我目前的JavaScript(在电脑上工作):

document.querySelector('.List').addEventListener('click', function (e) {
var selected;

if (e.target.tagName === 'LI') {
    selected = document.querySelector('li.selected');
    if (selected)
        selected.classList = '';
    e.target.classList = 'selected'
}

document.getElementById('ItemValue').value = e.target.innerText;

});

在上面JavaScript我只是简单地给列表项的背景添加颜色并获取内部文本并存储它。

我的列表(项目在运行时添加)

<div id="SelectedItems" class="ListBox">
  <ul id="Selected" class="List ItemList" runat="server" >
    <%--List items here--%>
  </ul>
</div>

如果您确定要包含 Jquery 库,请尝试使用此解决方案。

由于您的所有列表项都在 运行 时加载,您也可以这样使用,

$(document).ready(function () {
    $(document).on('click', '#Selected li' function () {
          // code
    });
});