可拖动正在阻止触摸事件
Draggable is blocking touch event
我正在尝试使用拖动来回移动div。这部分工作正常,直到div 具有可滚动的内容。由于滚动条,这不是桌面上的问题,但在触摸设备上会出现问题。由于触摸事件与拖动事件冲突,因此我无法滚动内容。我试图创建一个条件来检测阻力是否比垂直更水平。
我希望在垂直触摸交互期间防止拖动,但 UI 拖动方法仍然触发并覆盖触摸事件。 我正在使用触摸打孔插件使可拖动在触摸设备上工作,所以也许那里的某些东西使情况复杂化。 如果我能阻止 UI 拖动方法完全触发,直到满足水平拖动条件,那就太好了。 我认为这将消除干扰。
// note the condition inside the drag function
start: function(e){
// get starting point of the drag
startDragX = e.pageX;
startDragY = e.pageY;
},
drag: function(e, ui){
// prevent drag until user has moved 30px horizontally
if (Math.abs(e.pageX - startDragX) < 30){
ui.position.left = 0;
} else {
if (ui.position.left < 0) {
// left drag
ui.position.left = ui.position.left + 30;
} else {
// right drag
ui.position.left = ui.position.left - 30;
}
}
}
这是演示问题的小提琴(在触摸设备上测试(: http://jsfiddle.net/jTMxS/2/
我遇到了完全相同的问题,经过大量谷歌搜索,我在这里找到了解决方案:
在iPad Web App上拖放 - 同时保留滚动功能
因此,请查看那里的正确答案以及他们提到的代码段(实际上是在其他问题中(。我确实删除了event.preventDefault()
行,因为就我而言,我不想丢失滚动行为。希望这有帮助。
编辑 根据克里斯的评论,我将在此处包含我的解决方案的详细信息。我替换了这两个功能的触摸打孔插件:
var init = function() {
document.addEventListener('touchstart', handler, true);
document.addEventListener('touchmove', handler, true);
document.addEventListener('touchend', handler, true);
document.addEventListener('touchcancel', handler, true);
};
var handler = function(event) {
var touch = event.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvent');
simulatedEvent.initMouseEvent(
{ touchstart: 'mousedown', touchmove: 'mousemove', touchend: 'mouseup' } [event.type],
true, true, window, 1,
touch.screenX, touch.screenY, touch.clientX, touch.clientY,
false, false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
};
文档准备就绪时需要调用init
函数。
你试过这个吗?
(element).ontouchstart = function(e){
e.preventDefault();
}
我已经使用了上述方法来防止使用触摸在 Web 应用程序上进行整体滚动。
或者您可以将拖动绑定到另一个手势,例如使用 Kuo.js、锤子.js等的 2 根手指等。
相关文章:
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 如何使用纯javascript的移动触摸事件
- 移动定时触摸事件
- 模拟html5的触摸事件
- Phonegap/Cordova:如何添加Javascript多点触摸事件
- 如何在AngularJS中监听点击事件,而不是触摸事件
- 我可以让我的网站的内容可编辑区域对安卓股票浏览器上的触摸事件更敏感吗
- 在 Firefox 中“解析”触摸事件
- 将触摸事件转换为鼠标事件仅每秒有效一次
- 在移动 Safari 上向下拖动时,触摸事件停止触发 - iPad HTML5
- 如何在 javascript 中触发触摸事件
- 为什么触摸事件不在手指按压的中间
- 如何启用离子多点触摸事件
- 当我将位置更改为绝对时,画布精灵表和触摸事件不起作用
- 当元素在事件绑定后附加到DOM时,触摸事件不起作用
- JavaScript的触摸事件
- Tizen可穿戴设备屏幕顶部的Javascript触摸事件
- 用标准javascript而不是jquery中的mousedown、mousemove和mouseup触摸事件句柄
- (窗口中的'ontouchstart')返回true,但没有触摸事件
- 传单触摸事件未触发