防止触发文档事件侦听器？

Question

I have document.addEventListener('touchstart', this.onDocument); so I can detect when a user clicks off something.

But on my button click handler I have:

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

But when I click the button on my iPad, the document touch handler still runs.

How can I allow for clicks on my button without running the document touch handler?

Answer 1

You can use Event#preventDefault but you need to also check the Event#defaultPrevented flag in the container if you do.

Example Using 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>

Example without 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>

Example Using Event#defaultPrevented ( touchstart event)

 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>

Example that uses both click and touchstart listener

 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>

Example using ignored array

 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);

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

Answer 2

In the this.onDocument handler, check whether event.currentTarget is the button you want to prevent and do nothing. Some thing like this should work

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
}

Answer 3

The problem is touchstart fires before click so you can never know in advance if the touch resolves into a click (it will always fire).

The easiest way to 'fix' your problem is to check in your touchStart event handler what you are dealing with.

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

Or briefly detach the touchstart event handler when clicking the button. This works but since it uses an async re-attachement it feels a bit dirty.

 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) }

 <button>button that prevents</button> <div>foo</div> <button>another button</button>