How To Detect Html Elements On Touchmove

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.

Solution 1:

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

Works for desktop and kinda on my 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 submitfunctionbindEvents(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

<divdata-role="page"class="type-home"><divdata-role="content"><ulid="theList"data-role="listview"data-inset="true"data-theme="c"data-dividertheme="f"><liid="list-d"data-role="list-divider">Items</li><liid="list-item-1"><ahref="#">List Item 1</a></li><liid="list-item-2"><ahref="#">List Item 2</a></li><liid="list-item-3"><ahref="#">List Item 3</a></li><liid="list-item-4"><ahref="#">List Item 4</a></li><liid="list-item-5"><ahref="#">List Item 5</a></li><liid="list-item-6"><ahref="#">List Item 6</a></li><liid="list-item-7"><ahref="#">List Item 7</a></li><liid="list-item-8"><ahref="#">List Item 8</a></li><liid="list-item-9"><ahref="#">List Item 9</a></li><liid="list-item-10"><ahref="#">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.