내 팝업이 터치시 차단되었지만 "포인터 다운"수신기를 사용하여 클릭하지 않는 이유는 무엇입니까?

Question

버튼을 클릭하여 활성화하면 새 창/탭이 열리고 기능을 활성화하는 원본 창과 다른 특정 HTML 및 스타일로 채워지는 '인쇄 페이지'기능을 만들었습니다.

정상적인 마우스 클릭을 사용할 때 모든 것이 예상대로 작동하지만 터치 스크린 (또는 터치 스크린 에뮬레이션)에서는 새 창이 차단됩니다. 버튼은 클릭 및 터치를 모두 가로 채는 "포인터 다운"이벤트에 바인딩됩니다.

사람들은 여기에서 무슨 일이 벌어지고 있는지, 그리고 그들이 똑같은 사건을 일으키고 있다고해도 "클릭 다운"이벤트가 정상적인 클릭 대 터치에서 다르게 반응하는 이유를 설명 할 수 있습니까? 저는 Chrome을 사용하고 있습니다. 우리 앱이 파일 시스템 API를 사용하기 때문에 다른 브라우저에서 테스트 할 수 없습니다.

정상 클릭하면 새 창이 열립니다. "장치 에뮬레이터"켜고이 '터치'로 설정되어 있는지 확인 후 다시 버튼을 클릭하십시오 :

https://jsfiddle.net/7xmryg6j/

document.getElementById("print").addEventListener("pointerdown", printPage); 

function printPage(e){ 
    console.log(e); 
    window.open("", "printWindow"); 
} 

편집 :이 사용하는 다른 극복하는 방법을 찾는 게 아니에요 이벤트 바인딩, 나는 왜 "포인터 다운"이 이런 식으로 행동 하는지를 알아 내려고 노력하고 있습니다.

Answer 1

브라우저가 window.open 호출을 차단하지 못하도록하려면 '클릭'이벤트를 차단해야합니다. 브라우저가 그렇지 않으면 창을 열지 못하도록 차단할 수 있습니다. 여기 https://jsfiddle.net/yyfe0824/5/

를 코드입니다 : 터치로 작동하고 클릭 창을 여는

예

<!-- HTML --> 
<button class="sillyLink" data-url="http://www.google.com">Google</button> 
<button class="sillyLink" data-url="http://stackoverflow.com/">Stack</button> 
<button class="sillyLink" data-url="https://developer.mozilla.org/en-US/">MDN</button> 

// JS 
document.querySelectorAll('.sillyLink').forEach(node => 
node.addEventListener('click', function(e) { 
    window.open(e.target.dataset.url); 
}))