Как обнаружить HTML-элементы на TouchMove - PullRequest
Новая
       65

Как обнаружить HTML-элементы на TouchMove

0 голосов
/ 23 декабря 2011

У меня есть ряд пунктов списка. На iphone (сенсорное устройство), когда пользователь касается и перемещает палец по экрану, я хочу захватить все элементы html li, к которым он прикоснулся.

Так как мне это получить? Скажем, я хочу получить все идентификаторы этих элементов, и оповещение происходит, когда касание заканчивается.

Я пытался с jQuery Mobile с событием «swipe», но касался только первого, который также, если «touch» начинается с того конкретного элемента, появляется.

1 Ответ

1 голос
/ 23 декабря 2011

Не уверен, что это будет работать на мобильном устройстве, если вы не отключите прокрутку.

Работает для рабочего стола и вроде как на моем iPhone

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>

Я уверен, что вы можете связать несколько событий и зарегистрировать их, чтобы найти нужную вам комбинациюищу.

...