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

이 확실하지 않음 귀하의 질문에 대답하지만 맥 데스크톱 사파리는 "속도"가 이미 덮어 쓰지 않으려는 윈도우의 속성이기 때문에 JS로드시 오류가 발생합니다. iOS Safari에서 같은 오류가 발생했을 가능성이 있습니다. 편집 : 그리고 그 오류 코드 실행을 중지 수 있습니다.

개체의 모든 상수를 네임 스페이스로 지정해야합니다. 또는이를 방지하기 위해 iffy에 모든 코드를 포함 시키십시오. 글로벌 컨텍스트에 어떤 속성이 이미 존재하는지 확신 할 수 없습니다.

업데이트 : 또한 실시간 사이트에서 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` 
}); 

})() 

당신은 당신이 할 수있는 맥이있는 경우 use desktop Safari's inspector to debug mobile safari.