>source

document.addEventListener('touchstart', this.onDocument);  사용자가 무언가를 클릭하면 감지 할 수 있습니다.

그러나 버튼 클릭 핸들러에는 다음이 있습니다.

toggleItemActive(e) {
        e.stopPropagation();
        ....

그러나 iPad에서 버튼을 클릭해도 문서 터치 핸들러가 계속 실행됩니다.

문서 터치 핸들러를 실행하지 않고 어떻게 버튼 클릭을 허용합니까?

  • 답변 # 1

    Event#preventDefault 를 사용할 수 있습니다  그러나 당신은 또한 Event#defaultPrevented 를 확인해야합니다  할 경우 컨테이너에 플래그를 지정하십시오.

    Event#defaultPrevented 를 사용한 예

    document.addEventListener("click", function(event) {
      if (event.defaultPrevented) return;
      console.log("Container Clicked");
    });
    document.querySelector("#test").addEventListener("click", function(event) {
      event.preventDefault();
      console.log("Test Clicked");
    });
    
    

    <button id="test">Test</button>
    
    

    Event#defaultPrevented 가없는 예
    document.addEventListener("click", function(event) {
      console.log("Container Clicked");
    });
    document.querySelector("#test").addEventListener("click", function(event) {
      event.preventDefault();
      console.log("Test Clicked");
    });
    
    

    <button id="test">Test</button>
    
    

    Event#defaultPrevented 를 사용한 예  (와이즈 와이즈)  이벤트)

    touchstart
    
    

    document.addEventListener("touchstart", function(event) {
      if (event.defaultPrevented) return;
      console.log("Container Clicked");
    });
    document.querySelector("#test").addEventListener("touchstart", function(event) {
      event.preventDefault();
      console.log("Test Clicked");
    });
    var event = document.createEvent("HTMLEvents");
    event.initEvent("touchstart", true, true);
    document.querySelector("#test").dispatchEvent(event);
    
    

    <button id="test">Test</button> 를 모두 사용하는 예  그리고 click  리스너

    touchstart
    
    

    document.addEventListener("touchstart", function(event) {
      if (event.defaultPrevented) return;
      console.log("Container Clicked");
    });
    document.querySelector("#test").addEventListener("touchstart", function(event) {
      event.preventDefault();
    });
    document.querySelector("#test").addEventListener("click", function(event) {
      console.log("Test Clicked");
    });
    
    

    무시 된 배열을 사용하는 예

    <button id="test">Test</button>
    
    

    var excludedList = ["test"];
    document.addEventListener("touchstart", function(event) {
      if (excludedList.indexOf(event.target.id) !== -1) return;
      console.log("Container Clicked");
    });
    document.querySelector("#test").addEventListener("click", function(event) {
      console.log("Test Clicked");
    });
    var event = document.createEvent("HTMLEvents");
    event.initEvent("touchstart", true, true);
    document.querySelector("#test").dispatchEvent(event);
    
    

  • 답변 # 2

    와이즈 비즈에서  핸들러, <button id="test">Test</button> 여부 확인  당신이 막고 싶지 않은 버튼입니다. 이런 식으로 작동합니다

    this.onDocument
    
    

  • 답변 # 3

    문제는 event.currentTarget 입니다   onDocument(e){ // get access to the target button e.g assuming your button has an id targetButton let targetButton = document.querySelector('#targetButton') // do no thing if the target button is clicked if(e.currentTarget === targetButton){ return; } // do whatever you want to do } 전에 화재  터치로 인해 클릭으로 해결되는지 항상 알 수 없습니다 (항상 발생합니다).

    문제를 '수정'하는 가장 쉬운 방법은 touchStart 이벤트 핸들러에서 처리중인 항목을 확인하는 것입니다.

    touchstart
    
    

    또는 버튼을 클릭 할 때 터치 스타트 이벤트 핸들러를 잠시 분리하십시오. 이 방법은 작동하지만 비동기 재 연결을 사용하기 때문에 약간 더럽습니다.

    click
    
    

    function onDocumentTouchStart(e){
      if (!e.target.matches('button|a.this-one')) { // refine queryString for exclusions
        // proceed with logging
      }
    }
    
    

    const onDocumentTouchStart = ()=>console.log('touchstart') toggleDocumentTouchStart(true) const button = document.querySelector('button') button.addEventListener('touchstart', e => { toggleDocumentTouchStart(false) requestAnimationFrame(toggleDocumentTouchStart.bind(null,true)) }) button.addEventListener('click', ()=>console.log('buttonClick')) function toggleDocumentTouchStart(add){ add ?document.body.addEventListener('touchstart', onDocumentTouchStart) :document.body.removeEventListener('touchstart', onDocumentTouchStart) }

관련 자료

  • 이전 c# - RESTful API 엔드 포인트 이름 지정
  • 다음 python - 정규 표현식을 사용하여 대괄호 안에 문자를 교체