JQM:正确的触摸事件用于导航,不会在手指滚动时触发
JQM: Correct touch event to use for navigation, that does not fire on finger scrolling
我正在构建一个 cordova 应用程序。
我的页面上有多个导航按钮 (16)。导航按钮每行换行 2 个按钮。这会导致页面可滚动。
我遇到一个问题,当我用手指滚动页面时,我没有触发的按钮。当我 "scroll" 页面时,我不希望任何事件触发我的导航代码。
我已经尝试了 touchstart
、touchend
和 tap
。从 teh docs tap 看来我正在寻找什么,它似乎确实可以更好地处理滚动,但按钮保持高亮度。它从不触发我的导航代码。
标记:
<div data-role="navbar">
<ul>
<li><a href="#">
<div id="wineButton">
<img src="images/images/categories/wine.png" style="width: 45px; height: 45px;" /><br />
Wine Tasting
</div>
</a></li>
</ul>
</div>
JS代码
document.getElementById('wineButton').addEventListener('tap', function () {
currentCategory = "Wine Tasting"
do_nav();
}, false);
我最终编写了自己的代码来检查触摸开始和触摸结束时的屏幕点击位置,并确定它是点击还是移动。
我正在构建一个 cordova 应用程序。
我的页面上有多个导航按钮 (16)。导航按钮每行换行 2 个按钮。这会导致页面可滚动。
我遇到一个问题,当我用手指滚动页面时,我没有触发的按钮。当我 "scroll" 页面时,我不希望任何事件触发我的导航代码。
我已经尝试了 touchstart
、touchend
和 tap
。从 teh docs tap 看来我正在寻找什么,它似乎确实可以更好地处理滚动,但按钮保持高亮度。它从不触发我的导航代码。
标记:
<div data-role="navbar">
<ul>
<li><a href="#">
<div id="wineButton">
<img src="images/images/categories/wine.png" style="width: 45px; height: 45px;" /><br />
Wine Tasting
</div>
</a></li>
</ul>
</div>
JS代码
document.getElementById('wineButton').addEventListener('tap', function () {
currentCategory = "Wine Tasting"
do_nav();
}, false);
我最终编写了自己的代码来检查触摸开始和触摸结束时的屏幕点击位置,并确定它是点击还是移动。