触摸事件在 Chrome Devtools 中似乎工作正常，但在移动设备上没有响应

Question

在 Chrome 开发工具中使用移动模式时，一切正常。但是，一旦我将我的代码上传到服务器并在我的 iPhone 上尝试它，它就没有响应。
这是无响应应用程序的 link，下面是我的事件侦听器的代码..

代码：

// touch timer to stop and start
time.addEventListener('touchstart', (e) => {
    if (running === false){
        running = true;
        timer = setInterval(startTimer, 100);
    }
    else {
        running = false;
        clearInterval(timer);
    }
});

// touch '+' to increase speed by 0.5 mph
up.addEventListener('touchstart', (e) => {
    mph += 0.5;
    speed.innerHTML = `${mph.toFixed(1)} mph`
});

// touch '-' to decrease speed by 0.5 mph
down.addEventListener('touchstart', (e) => {
    if (mph >= 0.5){
        mph -= 0.5;
        speed.innerHTML = `${mph.toFixed(1)} mph`
    }
});

//Gathers start position for finger swipe
speedRow.addEventListener('touchstart', (e) => {
    xStart = e.changedTouches[0].pageX;
});

// Swipe finger to change speed
speedRow.addEventListener('touchmove', (e) => {
    e.preventDefault();
    xEnd = e.changedTouches[0].pageX;
    if (xStart < xEnd){
        mph += (Math.abs(xEnd - xStart)/1500)
    }
    else if (xStart > xEnd && mph > 0) {
        mph -= (Math.abs(xEnd - xStart)/1500)
    }
    speed.innerHTML = `${mph.toFixed(1)} mph`
});

Answer 1

不确定这是否回答了您的问题，但是 mac desktop safari 在您的 JS 加载时抛出错误，因为 "speed" 已经是 window 上的属性它不想被覆盖。 iOS safari 很可能会抛出同样的错误。编辑：那个错误可能会停止代码执行。

您应该将所有这些常量命名为一个对象。或者将你所有的代码包装成一个问题来防止这种情况发生。您无法确定全局上下文中已经存在哪些属性。

更新：此外，在实时站点上，您没有在 speedRow 的 'touchstart' 侦听器中传递 'e'，这也可能会停止在 iOS safari 上执行。

更新实际答案 刚刚在我的 iPhone 上测试了实时站点。 iOS Safari 出错并停止执行，因为您试图覆盖全局时间变量。看起来它在 chrome 中工作，因为 Chrome 没有全局时间变量。如果您像这样将代码包装成不确定的形式，它将起作用：

(function () {var mili = 0;
var sec = 0;
var min = 0;
var running = false;
var timer;
var mph = 0;
var distanceTraveled = 0;


var xStart;
var xEnd;

const navbar = document.getElementById('navbar');
const time = document.getElementById('time');
const elapsedTime = document.getElementById('time');
const up = document.getElementById('increase');
const down = document.getElementById('decrease');
const runSpeed = document.getElementById('speed');
const distance = document.getElementById('distance');
const speedRow = document.getElementById('speedRow');


function startTimer(){
    mili += 100;
    if (mili > 999){
        mili = 0;
        sec +=1;
        distanceTraveled += (1/3600) * mph;
        if (sec > 59){
            sec = 0;
            min += 1;
        }
    }
    if (sec < 10){
        var strSec = `0${sec}`;
    }
    else{
        strSec =`${sec}`;
    }
    if (min < 10){
        var strMin = `0${min}`;
    }
    else{
        strMin =`${min}`;
    }
    if(mili < 100){
        if(mili === 0){
            strMili = '00'
        }
        else{
            var strMili = `${mili}`;
            strMili = strMili.slice(0, -1);
            strMili = `0${strMili}`;
        }
    }
    else{
        strMili = `${mili}`;
        strMili = strMili.slice(0, -1);
    }

    elapsedTime.innerHTML = `${strMin}:${strSec}:${strMili}`;

    distance.innerHTML = `${distanceTraveled.toFixed(2)} miles`;


}

time.addEventListener('touchstart', () => {
    if (running === false){
        running = true;
        timer = setInterval(startTimer, 100);
    }
    else {
        running = false;
        clearInterval(timer);
    }
});

up.addEventListener('touchstart', () => {
    mph += 0.5;
    runSpeed.innerHTML = `${mph.toFixed(1)} mph`
});

down.addEventListener('touchstart', () => {
    if (mph >= 0.5){
        mph -= 0.5;
        runSpeed.innerHTML = `${mph.toFixed(1)} mph`
    }
});

speedRow.addEventListener('touchstart', (e) => {
    xStart = e.changedTouches[0].pageX;
});

speedRow.addEventListener('touchmove', (e) => {
    e.preventDefault();
    xEnd = e.changedTouches[0].pageX;
    if (xStart < xEnd){
        mph += (Math.abs(xEnd - xStart)/1500)
    }
    else if (xStart > xEnd && mph > 0) {
        mph -= (Math.abs(xEnd - xStart)/1500)
    }
    runSpeed.innerHTML = `${mph.toFixed(1)} mph`
});

})()

如果你有 mac 你可以 use desktop Safari's inspector to debug mobile safari.

触摸事件在 Chrome Devtools 中似乎工作正常，但在移动设备上没有响应

Touch events seem to work fine in Chrome Devtools, but don't respond on mobile devices

javascript

mobile

event-listener

touch-event