如何在touchmove上检测html元素

时间:2011-12-23 10:07:46

标签: javascript jquery-mobile touch touch-event

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

那我怎么做到的呢?假设我希望得到这些元素的所有ID,并在触摸结束时发出警告。

我尝试使用jipe Mobile进行“刷卡”事件,但只触及第一个触摸事件,如果'触摸'从特定元素开始出现,也会出现。

1 个答案:

答案 0 :(得分:1)

除非您禁用滚动,否则不确定这是否适用于移动设备。

适用于我的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>

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