在触摸屏上选择列表项

Selecting a list item on a touch screen

本文关键字：列表 选择 触摸屏      更新时间：2023-09-26

我发现了基于或围绕这个问题的多个线程，但是到目前为止的答案并没有帮助什么。我正试图通过纯JavaScript (JQuery接受)得到这个工作。

到目前为止，我有它的工作，这样我就可以选择一个项目通过网络浏览器在计算机上，但点击事件似乎不与触摸屏工作。我已经尝试了多个"解决方案"从其他线程，如添加触摸，例如:

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

我当前的JavaScript(适用于pc):

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中，我只是简单地为列表项的背景添加一种颜色，并获取内部文本并存储它。

My list(项目在运行时添加)

<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
    });
});
相关文章：