Question

我有一个使用Phonegap（3.1.0）和jQuery Mobile（1.4.0）创建的Android应用程序，使用单页面布局（因此每个页面都有自己的HTML文件）。

这就是：

page1.html 在X-Y位置有一个按钮。此按钮在点击时执行$.mobile.pageChange('page2.html);（在触摸设备的情况下点击）
page2.html 包含使用jQuery Mobile 列表视图数据角色
点按第1页上的按钮时，会发生转换，显示第2页。奇怪的是，列表元素的位置与 page1 中的点击按钮相同，直接突出显示（点击列表元素时的突出显示）。

从技术上讲，该列表中的任何元素都不应突出显示，直到用户点击它为止，因此由于某种原因，页面“记住”屏幕上的最后一个点击位置，并且在转换后，显示同一位置中的任何元素，就好像它已被挖掘过了。

有什么方法可以避免这种情况吗？

Answer 1

可悲的是，到目前为止我还没有答案。但我可以确认更换：

$.mobile.pageChange (which is now depreciated)

也会出现同样的问题：

$.mobile.pageContainer.pagecontainer("change", "page2.html", { transition: "none" });

此外，标题中的按钮也遇到了同样的问题。如果 page2 的标题中有一个按钮，并且在 page1 的相同位置点击了一个按钮，则突出显示和/或在所述按钮上激活。

我发现的另一个问题取决于$.mobile.pageChange或$.mobile.pageContainer的调用方式。如果使用onclick，则会出现突出显示问题。但是，如果在 page1 上使用ontouchend，我发现如果按钮位于 page2 的相同位置，该按钮不仅会突出显示，而且会实际点击/点按。

Answer 2

我在当前版本jqm 1.4.5中遇到了这个问题。

基本上，移动设备上的抽头点会突出显示下一页的元素 - 使用多页版本。在PC上测试这一点证实了我的怀疑，这是你的鼠标悬停的最后一个位置，所以你点击上一页上的按钮的最后一个位置。这导致了我的一些其他错误 - ＆gt;有时突出显示的元素即使在页面上的其他位置点击也会保持突出显示。

根据众多搜索结果的建议，尝试删除类和搞乱JS一般对我不起作用。最后，我在自定义文件中进行了一些简单的CSS更改 - 在jqm css文件之后插入。

我使用Firebug来查找相应的类，因为jqm重写了你的html。在我的情况下，我通过指定固定的背景颜色删除了悬停效果，但突出显示了表单中的所有点击元素以便更好地导航。

/* quick fix 'tap -> highlights element next page'-bug
 * : change on/off states to a fixed background color
 * so we avoid hover mechanisms
 * 'on'-elements stay highlighted
*/
html body .ui-controlgroup-vertical .ui-radio-on,
html body .ui-checkbox-on,
html body .ui-collapsible .ui-collapsible-heading .ui-collapsible-heading-toggle { /* selected radio/checkbox/collapsible */
    background-color: #eee !important;
}

html body .ui-radio-off,
html body .ui-checkbox-off,
html body .ui-collapsible-collapsed .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle { /* all unselected radio/checkbox/collapsible */
    background-color: #f6f6f6 !important;
}

html body .ui-collapsible .ui-collapsible-heading .ui-btn-active { /* collapsible tap state */
    background-color: #38c !important;
}

显然，这是针对我的需求的自定义修复，因此您可能需要检查自己想要更改的内容。这对我有用，也许会让别人不再发白发 - 就像发生在我身上一样！

（我只在PC和Android设备上测试过，需要检查IOS）

jQuery Mobile点击下一页中的元素高亮元素？

2 个答案: