javascript - iPad 上的 JQuery mobile : vclick triggers a scroll to the top of the page, 然后执行单击

Question

超短版: 基于 jQuerymobile 的 html5 web 应用程序上的元素不会直接响应 iPad 上的 vclick。相反，它们会默默地滚动到页面顶部，并在屏幕同一区域下的任何内容上触发 vclick。

带有图片和代码的长版本:我正在使用 JQuerymobile，当我使用 iPad 时，我的页面响应某些 vclick 事件时遇到问题。我有一个页面，其中包含一堆必须响应 vclick 事件的元素。如果一切都适合我的 iPad 显示屏而不需要滚动，那么一切都会完美运行。如果我需要滚动查看要单击的元素，我会得到以下行为:

我用手指点击红色圆圈所在的位置:

页面闪烁并且页面响应，就像我单击蓝色小圆圈中的区域一样:

(蓝色圆圈图像因缺乏菜鸟超链接而被编辑(imgur 上为 Q43ri.png)

在我叠加屏幕之前，我对到底发生了什么感到困惑:

因此，当我单击其中一个 div 时，它似乎正在关注我在显示屏上单击的坐标，然后滚动到窗口顶部并从该 Angular 实际执行单击。我该如何解决这个问题？

这是页面该部分的 html:

 <div id="inventoryPageContainer" style="padding-right: 100px;">
     <div id="inventoryDisplayHeaders">
    <div class="inventoryPageName inventoryPageColumn header">Name</div>
    <div class="inventoryPageQuant inventoryPageColumn header">#</div>
    <div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
    <div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
    <div class="inventoryPageQuant inventoryPageColumn">#</div>
    <div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>

所有 div 都是该 inventoryTemplate 项目的克隆。如果你需要 CSS(我不知道，我正在努力向阅读本文的人提供我所掌握的所有信息):

 #inventoryPage .inventoryPageName {
     width: 100%;
 }

 #inventoryPage .inventoryPageQuant {
     width: 50px;
     margin-right: -50px;
     vertical-align: middle;
 }

 #inventoryPage .inventoryPageWt {
     width: 50px;
     margin-right: -50px;
     right: -50px;
     vertical-align: middle;
 }

这是事件绑定(bind)代码: templateCopy.find('.inventoryPageName').text(row.itemName).bind('vclick.inventoryPage', { row: row },generateItemDescriptionDialog); templateCopy.find('.inventoryPageQuant').text(row.quantity).bind('vclick.inventoryPage', { row: row },generateItemQuantityDialog);

generateItemDescriptionDialog 和generateItemQuantityDialog 都在某些对话框页面上设置一些值，然后使用$.changePage("#thepages") 触发对话框页面显示。

那么呃..为什么会发生这种情况以及如何防止它发生？

(如果有人想知道我为什么要对武器和枪支进行编目，那么这是一个 RPG Angular 色表网络应用程序。)

Answer 1

我认为我的问题是我如何编写事件处理程序。我浏览并添加:

if (event.preventDefault)
     event.preventDefault();

到每个处理程序的开头并确保处理程序返回 false。诚然，我不知道它到底做了什么，所以我在这里有点崇拜 cargo ，但它确实解决了问题。