Chrome Devtoolsではタッチイベントが正常に機能しているようですが、モバイルデバイスでは応答しません

Question

Chromeの開発ツールでモバイルモードを使用している間は正常です。しかし、コードをサーバーにアップロードしてiPhoneで試してみると、応答しなくなります。
ここ は...応答しないアプリへのリンクであり、以下に私のイベントリスナーのためのコードである

リンク：Running App

コード：この場合

// 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のデスクトップサファリは、スピードが上書きしたくないウィンドウ上のプロパティであるため、JSがロードされたときにエラーをスローしています。 iOSのサファリが同じエラーを投げている可能性があります。編集：そのエラーは、コードの実行を停止する可能性があります。

オブジェクトのすべての定数を名前空間にする必要があります。または、あなたのコードをすべてiffyでラップして、それを防ぐことができます。どのようなプロパティがすでにグローバルコンテキストに存在するのかを確認することはできません。

更新： また、ライブサイトでは、speedRowの 'touchstart'リスナーに 'e'を渡していないため、iOSのサファリで実行を停止する可能性もあります。

実際の回答を更新 私のiPhone上で実際のサイトをテストしました。グローバル時間変数を上書きしようとしているため、iOSのサファリでエラーが発生し、実行が停止しています。 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` 
}); 

})() 

あなたはあなたができるマックを持っている場合はuse desktop Safari's inspector to debug mobile safari.