Prevent default on screen, but allow buttons to be pressed-CodePudding

I'm building a website in js/html/css. To play part of my game the user needs to press and hold the screen. This will default to highlighting the play area, so on click or touch events I want to use an event.preventdefault(). The problem then is that the user can not click on other buttons on the page.

Is there a way to both prevent default when clicking and holding, but also allow buttons to work as normal?

CodePudding user response：

I think something like this might work. Basically using a boolean variable to detect if an specific button has been clicked and then add a conditional statement to the e.preventDefault() so when the button is clicked is not affected by the e.preventDefault()

let isClicked = false

document.getElementById('myBtn').addEventListener('click', () => {
   isClicked = true
   
   setTimeOut(() => {
      isClicked = false 
   }, 100)    
})

function myPreventDefaultFunction(e){
   if(isClicked){
     // do something 
   } 
   else{
     e.preventDefault() 
   }
}

CodePudding user response：

Elements in the area still receives the other event