Question

一直在寻找如何在iPad上使用“sliderBar”工作。我几乎用http://www.the-xavi.com/articles/trouble-with-touch-events-jquery＆amp;融入我的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，据我所知，它不应该指向任何东西（have a look at the Touch Events specification，它详细描述了触摸对象及其属性）。

这会解决您的问题吗？

用于iPad的originalEvent.touches不起作用

1 个答案: