javascript - iPad 的 originalEvent.touches 不工作

Question

一直在到处寻找如何使“sliderBar”上的这种触动在 iPad 上工作。我几乎用这个 http://www.the-xavi.com/articles/trouble-with-touch-events-jquery & 融入我的 mouseDown 功能:

function handleSliderSlide(event, ui) {
    if(event.originalEvent.touches && event.originalEvent.touches.length) {
        event = event.originalEvent.touches[0];
    } else if (event.originalEvent.changedTouches && event.originalEvent.changedTouches.length) {
        event = event.originalEvent.changedTouches[0];
    }

    if(event.originalEvent.type === 'keydown') {
        var maxScroll = $('#yearsWrapper').attr('scrollWidth') - $('#yearsWrapper').width();
        var years = $('#dates li').length - 1;
        $('#sliderBar').slider('option', 'step', years);
        $('#yearsWrapper').attr({
            scrollLeft: ui.value * (maxScroll / 100)
        });
    } else {
        var maxScroll = $('#yearsWrapper').attr('scrollWidth') - $('#yearsWrapper').width();
        $('#sliderBar').slider('option', 'step', 1);
        $('#yearsWrapper').attr({
            scrollLeft: ui.value * (maxScroll / 100)
        });
    }
}

HTML 代码大致如下:

<div id="timeline">
    <div id="dates">
        <ul>
            <li>
                <a href="#year1">1900</a>
            </li>
            <li>
                <a href="#year2">2000</a>
            </li>
        </ul>
        <div id="sliderBarWrapper">
            <div id="sliderBar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 34%;"></a>
            </div>
        </div>
    </div>
    <div id="yearsWrapper">
        <div id="years">
            <div class="shadow">
                <div id="year1">
                    <a href="#">slider 1900</a>
                    <p>Year 1900 info</p>
                </div>
                <div id="year2">
                    <a href="#">slider 2000</a>
                    <p>Year 2000 info</p>
                </div>
            </div>
        </div>
        <!-- End years -->
    </div>
    <!-- End yearsWrapper -->
</div>

Answer 1

我认为这里的问题如下:

您首先用第一个触摸对象覆盖事件:

event = event.originalEvent.touches[0];

然后(我认为)你对待你的 event 对象就好像它仍然是原始对象一样:

if(event.originalEvent.type === 'keydown') ...

所以基本上你正在尝试访问 event.originalEvent.touches[0].originalEvent.type，据我所知，它不应该指向任何东西(have a look at the Touch Events specification 描述了触摸对象及其属性的详细信息)。

这是否解决了您的问题？