Question

Prelim caveat：我是js的新手，主要是通过网络搜索获得示例/教程。

我正在编写应该在网络和移动设备（例如iPad）上运行的js。

我们有一个图书馆可以帮助抽象出mouse和touch之间的差异：

if (navigator.userAgent.search('Mobile') > 0) {
  window.FLAGS = {
    start: 'touchstart',
    end: 'touchend',
    move: 'touchmove',
    click: 'click',
    touchScreen: true
  };
} else {
  window.FLAGS = {
    start: 'mousedown',
    end: 'mouseup',
    move: 'mousemove',
    click: 'click',
    touchScreen: false
  };
}

然后在代码中你可以做以下事情：

widget.view.bind(FLAGS.start, function(e) {

我正在尝试为touch找到mouseleave等价物，所以我可以做类似的伎俩。

我可以通过跟踪leave上的位置并将其与有问题的小部件的边界框进行比较来设想捕捉move事件的方法，但我希望有一个像touchstart / mousedown关系。

Answer 1

有人建议，但没有实施AFAIK：http://www.quirksmode.org/mobile/advisoryTouch.html

这样的事情可能有用（从头顶写下来，未经测试）：

var element;
document.addEventListener('touchstart', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    element = document.elementFromPoint(touch.pageX,touch.pageY);
}, false);

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    if (element !== document.elementFromPoint(touch.pageX,touch.pageY)) {
        touchleave();
    }
}, false);

function touchleave() { 
    console.log ("You're not touching the element anymore");
}

Answer 2

可能想查看jquery touchable插件。

Answer 3

关于触发触摸离开的整个想法是，我们需要获取元素的范围。

例如，框的宽度范围是从0到实际宽度，盒子的高度范围从0到实际高度

因此，如果X，Y值在此范围之间，则我们位于框内如果不是，那我们就离开盒子了。

请检查此代码段以使其更清晰。

// select the box that we will leave
const box = document.getElementById('box');

// add touchmove event to the box
box.addEventListener('touchmove', (e) => {
    // stop default behavior
    e.stopPropagation();
    e.preventDefault();
    e = e || window.event;

    // get box properties
    let a = box.getBoundingClientRect();
    // get current width
    let w = a.width;
    // get current height
    let h = a.height;

    // get values on x axis
    const x = e.touches[0].pageX - a.left; // to start the value from 0 (remove offsetleft)
    // get values on y axis
    const y = e.touches[0].pageY - a.top; // to start the value from 0 (remove offsettop)

    //! INFO
    // the box width range starts from [0 : w]
    // the box height range starts from [0 : h]

    // if X values between [0 , w] and Y values between [0 , h] then we inside the box | other than that then we left the box
    if ((x >= 0 && x <= w) && (y >= 0 && y <= h)) {
        console.log('in the box');
    } else {
        console.log('left the box');
    }

});

#box {
    width: 280px;
    height: 280px;
    outline: 1px solid red;
    margin: 100px auto;
}

<div id="box"></div>

用于触摸交互的javascript等效'mouseleave'

3 个答案: