相当于 'mouseleave' 的 javascript,用于触摸交互

标签 javascript user-interface mobile touch

前言:我是 js 的新手,主要是通过网络搜索示例/教程来获得的。

我正在编写 js,它应该在网络和移动设备(例如 iPad)上运行。

我们有一个库来帮助抽象出 mousetouch 之间的区别:

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) {

我正在尝试找到 mouseleavetouch 等效项,以便我可以执行类似的操作。

我可以想象通过跟踪 move 的位置并将其与相关小部件的边界框进行比较来捕获 leave 事件的方法,但我希望有一个像 touchstart/mousedown 关系这样的小单行。

最佳答案

有人建议,但未实现 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");
}

关于相当于 'mouseleave' 的 javascript,用于触摸交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5748476/

相关文章:

javascript - 服务器端 Ajax 响应速度太慢(shell 脚本)

javascript - 粘性导航的奇怪问题

javascript - 'google analytics web' 如何使用 javascript 知道移动设备的名称?

java - 修改桌面中的 LIBGDX 应用程序框架

performance - 对于一般的移动 safari 和移动 webkit,使用复杂的 CSS 还是图像更好?

networking - 移动网络中的持久 TCP 连接?

javascript - Jquery 使用多行追加

javascript - 嵌套的 Promise 被卡住

python - 如何获取用套索选择器绘制的区域数组?

java - 手动编码 Swing 组件