如何在touchmove上检测html元素

How to detect html elements on touchmove

本文关键字：检测 html 元素 touchmove      更新时间：2023-09-26

我有一系列的列表项。在iphone(触摸设备)上，当用户触摸并在屏幕上移动手指时，我想捕获他触摸过的所有html li元素。

我怎么得到它呢?比如我想获取这些元素的所有id而alert是触摸结束时的值

我尝试使用jQuery Mobile与"swipe "事件，但只有第一个被触摸，如果'touch'开始从特定的元素显示。

不确定这是否会在移动设备上工作，除非你禁用滚动。

适用于桌面和iPhone

  • http://jsfiddle.net/dYkcE/4/
  • http://jsfiddle.net/dYkcE/5/

JS 

// List of events: http://api.jquery.com/category/events/
// tap taphold swipe swiperight swipeleft
// click change dblclick submit
function bindEvents(element) {
    element.bind('mouseenter', function(event) {
        //alert('Element Id: '+$(element).attr('id')+' Event: '+event.type);
        console.log('Element Id: '+$(element).attr('id')+' Event: '+event.type);
    });
}
$('#theList li').each(function(){
    bindEvents($(this));
});
HTML 

<div data-role="page" class="type-home">
    <div data-role="content">
        <ul id="theList" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li id="list-d" data-role="list-divider">Items</li>
            <li id="list-item-1"><a href="#">List Item 1</a></li>
            <li id="list-item-2"><a href="#">List Item 2</a></li>
            <li id="list-item-3"><a href="#">List Item 3</a></li>
            <li id="list-item-4"><a href="#">List Item 4</a></li>
            <li id="list-item-5"><a href="#">List Item 5</a></li>
            <li id="list-item-6"><a href="#">List Item 6</a></li>
            <li id="list-item-7"><a href="#">List Item 7</a></li>
            <li id="list-item-8"><a href="#">List Item 8</a></li>
            <li id="list-item-9"><a href="#">List Item 9</a></li>
            <li id="list-item-10"><a href="#">List Item 10</a></li>
        </ul>
    </div>
</div>

我相信你可以绑定多个事件并记录它们以找到你正在寻找的正确组合。

相关文章：