javascript 相当于用于触摸交互的“mouseleave”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5748476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript equivalent of 'mouseleave' for touch interactions
提问by Doug Banks
Prelim caveat: I am very new to js and have mainly gotten by through doing web searches for examples/tutorials.
Prelim 警告：我对 js 很陌生，主要是通过网络搜索来获取示例/教程。
I am writing js which should run both on web and on mobile devices (e.g. iPad).
我正在编写 js，它应该在 web 和移动设备（例如 iPad）上运行。
We have a library to help abstract away the differences between mouseand touch:
我们有一个库来帮助抽象出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
};
}
Then in code you can do things like:
然后在代码中，您可以执行以下操作：
widget.view.bind(FLAGS.start, function(e) {
I am trying to find a touchequivalent for mouseleaveso I can do a similar trick.
我试图找到一个touch等价物，mouseleave以便我可以做一个类似的技巧。
I can imagine ways to catch a leaveevent by tracking the position on moveand comparing that to bounding box of widget in question, but I'm hoping there's a little one-liner like the touchstart/mousedownrelationship.
我可以想象leave通过跟踪位置move并将其与相关小部件的边界框进行比较来捕捉事件的方法，但我希望有一个像touchstart/mousedown关系这样的单线。
回答by Aleadam
It's been suggested, but not implemented AFAIK: http://www.quirksmode.org/mobile/advisoryTouch.html
有人建议，但没有实施 AFAIK：http://www.quirksmode.org/mobile/advisoryTouch.html
Something like this might work (writing it from top of my head, untested):
像这样的东西可能会起作用（从头开始写，未经测试）：
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");
}
回答by Eissa Saber
The whole idea about triggering touch leave is that we need to get the range of the element.
触发触摸离开的整个想法是我们需要获取元素的范围。
for example, the box width range starts from 0 to actual width, and the box height range starts from 0 to actual height
例如框宽范围从0开始到实际宽度，框高范围从0开始到实际高度
so if X, Y values are between this range then we are inside the box and if other than that then we left the box.
所以如果 X, Y 值在这个范围内，那么我们就在盒子里，如果不是，那么我们离开盒子。
check this snippet for better clarifying.
检查这个片段以获得更好的澄清。
// 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>