带有 Touch Punch 的 jQuery UI 滑块：手柄锁定答案

【问题标题】：jQuery UI slider with Touch Punch: handle locked带有 Touch Punch 的 jQuery UI 滑块：手柄锁定
【发布时间】：2012-11-27 21:18:04
【问题描述】：

我正在使用带有 Touch Punch (http://touchpunch.furf.com) 的 jQuery UI 滑块，因此它可以在触摸移动设备上运行。滑块位于位置：固定到顶部的标题中。标题下方的内容不固定，并在您向上滚动时滚动到标题下方。它在桌面上运行良好，但是当我在 iPhone 上对其进行测试时，一旦开始向上滚动，滑块手柄就无法拖动。

我认为它正在执行滚动事件而不是句柄的单击/触摸事件。

<div id="top">
  <div id="slider"></div>
</div>

<div class="pics">CONTENT</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">    
$('document').ready(function() {

$(function() {
    $( "#slider" ).slider({
        value:250,
        min: 50,
        max: 1000,
        range: "min",
        step: 50,
        slide: function( event, ui ) {
        $( "#amount" ).html( ui.value );
        }
    });
});
});
</script>


//css//

#top {
width: 100%;
position: fixed;
top:0; }

.pics {
margin: 0 auto;
width: 100%;
max-width: 1280px;
padding-top: 86px;}

环顾四周后，我尝试添加它以禁用在#top div 上的滚动：

$("#top").bind("touchstart", function(e) { e.preventDefault(); });

但我认为这不起作用，因为它仍在拾取下面带有类 .pics 的 div？

感谢您提供的任何帮助，如果我没有理解或遗漏明显的内容，我们深表歉意！

【问题讨论】：

标签： jquery jquery-ui jquery-ui-touch-punch

【解决方案1】：

好的，我想我已经找到了解决办法。可能不是最有效的方法，目前我只能在 iPhone 和 iPad 上查看。

var divTop = $("#top").height();

$(document).bind("touchmove", function(e) { 
if (e.originalEvent.touches[0].clientY < divTop) {
    e.preventDefault();     
}
});

因此，如果在 div #top 覆盖的同一区域触发 touchmove 事件，则会阻止默认操作（即滚动），但滑块句柄可以工作。

【讨论】：