在触摸屏上选择列表项

Question

我发现了多个基于或围绕这个问题的话题，但是到目前为止的答案一直没有帮助。我正在尝试通过纯 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>

Answer 1

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

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

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

在触摸屏上选择列表项

Selecting a list item on a touch screen

javascript

jquery

asp.net

ipad

touchscreen