UL标签不能在Ipad上点击

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

我确实在未来几周内在Mac和IPAD2上获得了我的双手。我有Web检查员运行。

<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。这是成熟的代码。

来源

2013-11-25 Seth

在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 
});

编辑：
我$(window).scrollTop()取代e.pageY - 而滚动页面触摸位置可能会留在关系到文档。

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

编辑3：
据迈克·巴威克的评论，感谢@Mike的编辑。我也修改了一下。 OP可能使用.live方法由于事件委托 - 我想他动态地添加<li>元素，所以最好通过.li:not(.selected)作为.on方法的第二个参数。更多信息HERE。

来源

2013-11-25 19:29:55 matewka

我推动测试的变化，ipad是这个之后的事后考虑。但那很好知道。 – Seth

我更新了代码，添加了示例代码。看一看。我无法测试它，因为我没有任何iOS设备。 – matewka

使用'.on（）'而不是'.live（）'。 '.live（）'方法已被废弃...... –

UL标签不能在Ipad上点击

回答

相关问题