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