Question

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

代码：

// 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

不确定这是否能解答您的问题，但是当您加载JS时，mac桌面safari会抛出错误，因为“speed”已经是窗口上不想覆盖的属性。 iOS Safari可能会抛出相同的错误。编辑：这个错误可能会阻止代码执行。

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

更新：此外，在实际网站上，你没有在speedTow的'touchstart'监听器中传递'e'，这也可能是在iOS Safari上停止执行。

更新实际答案 刚刚测试了iPhone上的实时网站。 iOS safari错误并停止执行，因为您试图覆盖全局时间变量。看起来它在Chrome中工作，因为Chrome没有全局时间变量。如果你将代码包装在像这样的iffy中它将起作用：

(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中运行良好，但不会在移动设备上做出响应

1 个答案: