如何在touchmove上检测HTML元素 [英] How to detect html elements on touchmove

问题描述

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

I've a series of list items. On an iphone (touch device), as a user touches and moves his finger across the screen, I want to capture all the html li elements that he has touched.

那我该怎么办呢?假设我想获取这些元素的所有ID，并在触摸结束时发出警报.

So how do I get that? Say I want to get all the ids of those elements and alert is when the touch ends.

我尝试了jQuery Mobile的"swipe"事件，但只有第一个被触摸，如果从特定元素开始的"touch"也出现了.

I tried with jQuery Mobile with "swipe' event but only the first one to be touched, that too if the 'touch' starts from that particular element shows up.

推荐答案

除非禁用滚动，否则不确定在移动设备上是否可以使用.

Not sure if this will work on a mobile device unless you disable scrolling.

适用于台式机，还可以在iPhone上使用

Works for desktop and kinda on my iPhone

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

• 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>

我确定您可以绑定多个事件并将其记录下来以找到所需的正确组合.

I'm sure you could bind multiple events and log them to find the right combo you're looking for.

这篇关于如何在touchmove上检测HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！