你如何规避多点触控?
How do you circumvent multi-touch?
我在使用 pointerdown 和 pointerup 时遇到问题,特别是在涉及多点触控设备时。虽然这些事件侦听器只需单击一次鼠标即可按预期工作,但触摸屏可以允许同时多次点击会破坏以下代码:
HTML
<progress id="air" max="100" value="100">AIR</progress>
JS
var air = document.querySelector('#air')
var losingairInterval, gainingairInterval;
function drowning() {
if (air.value <= 0) {
clearInterval(losingairInterval)
} else {
air.value--;
}
}
// Breathing Mechanic
function gainingair() {
if (air.value == 100) {
clearInterval(gainingairInterval)
} else {
air.value++;
}
}
function crouchingdown() {
clearInterval(gainingairInterval)
losingairInterval = setInterval(drowning, 100)
}
function crouchingup() {
clearInterval(losingairInterval)
gainingairInterval = setInterval(gainingair, 200)
}
addEventListener('pointerup', crouchingup);
addEventListener('pointerdown', crouchingdown);
jsFiddle 示例:
https://jsfiddle.net/CamWhiting/krufx5by/2/
而不是禁用 multi-touch,您可以使用简单的 IF 语句检测一组 pointerup-s 或 pointerdown-s。
// Method to stop multi-touch affecting up the breathing mechanic
var killmulti = 0;
// Breathing Mechanic
function gainingair() {
if (air.value == 100) {
clearInterval(gainingairInterval)
} else {
air.value++;
}
}
function crouchingdown() {
killmulti++;
if (killmulti === 1) {
clearInterval(gainingairInterval)
losingairInterval = setInterval(drowning, 100)
}
}
function crouchingup() {
killmulti--;
if (killmulti < 1) {
clearInterval(losingairInterval)
gainingairInterval = setInterval(gainingair, 200)
}
}
addEventListener('pointerup', crouchingup);
addEventListener('pointerdown', crouchingdown);
我在使用 pointerdown 和 pointerup 时遇到问题,特别是在涉及多点触控设备时。虽然这些事件侦听器只需单击一次鼠标即可按预期工作,但触摸屏可以允许同时多次点击会破坏以下代码:
HTML
<progress id="air" max="100" value="100">AIR</progress>
JS
var air = document.querySelector('#air')
var losingairInterval, gainingairInterval;
function drowning() {
if (air.value <= 0) {
clearInterval(losingairInterval)
} else {
air.value--;
}
}
// Breathing Mechanic
function gainingair() {
if (air.value == 100) {
clearInterval(gainingairInterval)
} else {
air.value++;
}
}
function crouchingdown() {
clearInterval(gainingairInterval)
losingairInterval = setInterval(drowning, 100)
}
function crouchingup() {
clearInterval(losingairInterval)
gainingairInterval = setInterval(gainingair, 200)
}
addEventListener('pointerup', crouchingup);
addEventListener('pointerdown', crouchingdown);
jsFiddle 示例: https://jsfiddle.net/CamWhiting/krufx5by/2/
而不是禁用 multi-touch,您可以使用简单的 IF 语句检测一组 pointerup-s 或 pointerdown-s。
// Method to stop multi-touch affecting up the breathing mechanic
var killmulti = 0;
// Breathing Mechanic
function gainingair() {
if (air.value == 100) {
clearInterval(gainingairInterval)
} else {
air.value++;
}
}
function crouchingdown() {
killmulti++;
if (killmulti === 1) {
clearInterval(gainingairInterval)
losingairInterval = setInterval(drowning, 100)
}
}
function crouchingup() {
killmulti--;
if (killmulti < 1) {
clearInterval(losingairInterval)
gainingairInterval = setInterval(gainingair, 200)
}
}
addEventListener('pointerup', crouchingup);
addEventListener('pointerdown', crouchingdown);