iPad 上的originalEvent.touches 不起作用

Question

一直在到处寻找如何在 iPad 上实现“sliderBar”上的触摸操作。我几乎使用这个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 = event.originalEvent.touches[0];

然后（我认为）您将您的 event 对象视为它仍然是原始对象：

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

所以本质上你正在尝试访问 event.originalEvent.touches[0].originalEvent.type，据我所知，它不应该指向任何东西（查看描述触摸的触摸事件规范对象及其属性的详细信息）。

这能解决您的问题吗？