Question

<div id="menuContainer"></div>

<div id="menuItemTemplate" class="menuItem">
    <div class="menuItemTitle"></div>
    <div class="menuItemImage"><img src="resources/BlackRightChevron.png"/></div>
</div>

menuContainer div动态追加 menuItemTemplate 的克隆。当前点击事件：

menuContainer.addEventListener('click',menuContainer_click,false);

当 menuContainer 在y轴上溢出时，

不会触发。所以我实现了一些code found else where on stackoverflow。

这使得它可以滚动但是点击事件不会运行（可能是因为preventDefault() s）。没有它们，我认为每个事件都会被注册为点击而不是可能的移动。

哦，我正在使用jQuery mobile，它也是用户界面。我的问题有解决办法吗？

我根据建议所做的更改：

var scrollStartPosY=0;

document.getElementById(element).addEventListener("touchstart", function(event) {
    scrollStartPosY=this.scrollTop+event.touches[0].pageY;
    event.preventDefault();
},false);

document.getElementById(element).addEventListener("touchmove", function(event) {
    this.scrollTop=scrollStartPosY-event.touches[0].pageY;
    event.preventDefault();

    move = true;
},false);

document.getElementById(element).addEventListener("touchend", function(event) {
if(move)
    move = false;
else
    menuContainer_Click(event);

},false);

Answer 1

我确定preventDefaults正在消灭你的点击。在任何情况下，您都使用click / mousedown / touchstart进行独占滚动。

我认为你应该做的是注册一个touchend事件来触发你想要拥有当前点击事件的任何事情。您可能想要在此期间验证是否存在滚动，如果是，则忽略touchend。这将区分滚动和点击两个单独的意图。

Answer 2

决定iScroll只是一个更简单的解决方案。虽然只有一个div难以完全滚动到“底部”。

如何使div既可滚动又可点击？

2 个答案: