Question

我的任务是确定为什么当IPAD用户尝试使用任何标签栏时，它根本不会注册为可点击。你可以整天用手指敲击按钮，但就IPAD而言，它只是文字。一个小项目背景是它在asp MVC中开发并使用LESS。我在我的计算机和Mac上测试了Safari 6，这些选项卡在这些环境中都很好。有关iPhone上是否存在问题的报告存在冲突。

在接下来的几周里，我的确抓住了Mac和IPAD2。我有网络检查员在运行。

<div id="Tabs" class="tabContainer" >
    <ul>
        <li id="UserAdmin" class="selected">Users</li>
        <li id="CompanyAdmin">Companies</li>
        <li id="AdminMessages">Admin Messages</li>
    </ul>
</div>
<div class="tabContentDivider">
</div>
<div id="tabPlaceHolder" class="tabContent">
    <% Html.RenderPartial("ManageUsersPartial", Model, new ViewDataDictionary()); %>
</div>

JS：

$(function () {
    $('#Tabs ul li:not(.selected)').live('click', function () {
        $('#tooltip').remove();
        var selectedTab = $(this).attr('id');

        $('#Tabs ul li').removeClass('selected');
        $(this).addClass('selected');
        $(window).unbind('resize');
        loadRequest($('.tabContent'), global.baseUrl() + 'Admin/ShowTab/' + selectedTab, function () { });
    });
});

function loadRequest($container, resource, onComplete) {
    $.get(resource, function(result) {
        $result = $(result);

        if ($('#ExceptionPanel', $result).length > 0) {
            $('body').html(result);
        } else {
            $container.html(result);
            if (onComplete)
                onComplete();
        }
        $result.remove();
    });
}

这里缺少什么？一些CSS标签？我不想改变JavaScript。这是成熟的代码。

Answer 1

在iOS中，click事件仅在<a>个元素（可能还有某些表单输入）上触发。您应该为touchstart事件添加处理程序：

$('#Tabs ul li:not(.selected)').live('click touchstart', function () {
    //...
});

但问题可能更复杂，因为用户即使在想要滚动页面时也会遇到处理程序行为，为此，请点击li区域中的屏幕。
最终解决方案将引入touchstart以及touchend并检查$(window).scrollTop()或鼠标（手指）位置是否已更改。代码可能如下所示：

var scrollTop = false;
$('#Tabs ul').on('touchstart', 'li:not(.selected)', function (e) {
    e.preventDefault(); // IMPORTANT - this line fixes the Android bug but be aware that it might unintentionally prevent from scrolling the document
    scrollTop = $(window).scrollTop();
});
$('#Tabs ul').on('click touchend', 'li:not(.selected)', function () {
    // let's give it a 10px threshold, since the `click` is not always a pure point `click`
    // still, you might want to experiment with different thresholds
    if (false !== scrollTop && 10 < Math.abs(scrollTop - $(window).scrollTop())) {
        return scrollTop = false;
    }

    // ...rest of your code
});

修改：
我将e.pageY替换为$(window).scrollTop() - 在滚动页面时，触摸位置可能与文档保持相同。

编辑2 ：
您将此问题描述为与iOS相关，但它也会显示在Android设备上。在那里，您可以向touchstart处理程序添加一行：e.preventDefault()。我之前可以提到，但不知怎的，我没有。 Android上的触摸事件存在已知问题，有时touchmove和touchend事件会拒绝触发。增加的代码行解决了这个问题注意 e.preventDefault()可能会阻止文档滚动。正如我已经提到的，我没有可能测试它。

编辑3 ：
根据Mike Barwick的评论，感谢@Mike的编辑。我也修改了一下。由于事件委托，OP可能使用.live方法 - 我猜他会动态添加<li>个元素，因此最好将.li:not(.selected)作为第二个参数传递.on方法。更多信息 HERE 。

UL标签在Ipad上无法点击

1 个答案: