2

我想在我的页面上有一个 div 元素，当它被按下时它会增加页面上的数字。这相当容易，但我希望它也能在 iPad 和 Android 设备上运行。

我在 div 上使用 jQuery 绑定使用 touchstart 事件。使用 setInterval 更新数字（每次增加数字时我都可以调用 setTimeout，但这无关紧要）。我希望当手指（触摸）移出 div 时清除间隔。不幸的是，直到手指从屏幕上释放后才会调用 touchend。移动 safari 或 webkit 似乎不支持 touchleave。

所以在这里我的问题是：关于如何模仿 touchleave 的任何想法？

4

3 回答 3

3

基于上述答案，这就是我所做的。

var $this = $('elementselector');
var fnmove = function (e) {
e.preventDefault();
e = e.originalEvent;
var touch = e.touches[0] || e.changedTouches[0];
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) {
        $this.trigger(touch_leave_event);
        $this.unbind(touch_move_event, fnmove);
    };
};
$this.bind(touch_move_event, fnmove);

-- 入站函数

function _isInBounds(touch, elemposition, width, height) {
    var left = elemposition.left,
        right = left + width,
        top = elemposition.top,
        bottom = top + height,
        touchX = touch.pageX,
        touchY = touch.pageY;

    return (touchX > left && touchX < right && touchY > top && touchY < bottom);
};
于 2011-08-10T08:30:13.380 回答
2

编辑（感谢纪尧姆完成此）：

var $this = $('elementselector');
var fnmove = function (e) {
e.preventDefault();
e = e.originalEvent;
var touch = e.touches[0] || e.changedTouches[0];
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) {
        $this.trigger(touch_leave_event);
        $this.unbind(touch_move_event, fnmove);
    };
};
$this.bind(touch_move_event, fnmove);

function _isInBounds(touch, elemposition, width, height) {
    var left = elemposition.left,
        right = left + width,
        top = elemposition.top,
        bottom = top + height,
        touchX = touch.pageX,
        touchY = touch.pageY;

    return (touchX > left && touchX < right && touchY > top && touchY < bottom);
};

对不起，简短的回答，我要离开工作。我会回来填补空白。但你应该明白这一点。

于 2011-08-09T22:07:05.553 回答
1

我发现最好的方法是检查 touchmove 处理程序中的接触点的位置。当一个接触点被创建时（在 touchstart 上），它被添加到一个名为“touches”的数组中。这些接触点可以通过索引（接触点的添加顺序）访问。然后您可以从该点访问 x 和 y 坐标以确定它是否仍在您正在观察的元素的范围内。假设我有一个名为“myDiv”的 div，我想检测用户的手指何时从内部拖出。

var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('touchmove', function(event){
    var currentElement = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
    if (currentElement.id !== 'myDiv'){
        console.log('finger has moved outside of element');
    }
}, false);

因此，当我们移动手指时，我们使用 document.elementFromPoint() 函数捕获它当前所在的元素，传入从存储在 touches 数组中的触摸收集的 x 和 y 坐标，索引为 0（将添加额外的触摸到索引 1、2、3 等处的数组）。最后，我们检查我们手指当前所在的捕获元素是否与“myDiv”相同。如果不是，我们知道手指已经从这个元素上移开。

于 2015-03-25T17:16:03.590 回答