Next.js Discord

Discord Forum

on click not working on mobile

Answered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
<div className="absolute left-0 right-0 ml-auto w-24 h-24 cursor-pointer z-50"onClick={closeAdvertisment}/>

  const closeAdvertisment = (event) => {
    // skip or close ad
    event.preventDefault()
    if (enableClose == true) {
      setAdvertisment(false)
      setEnableClose(false)
    } else {
      return
    }
  }

  const showAdvertisment = () => {
    // cycles through ad's
    if (advertismentToPlay > 3) {
      setAdvertismentToPlay(1)
    } else {
      setAdvertismentToPlay(advertismentToPlay + 1)
    }
    // enable skip ad after 5s
    setTimeout(() => {
      this.setEnableClose(true)
    }, 5000)
    // show ad
    setAdvertisment(true)
  }


This works on pc perfectly fine on any screen dimensions but on a mobile phone the div button dosnt work
Answered by African Slender-snouted Crocodile
window.ontouchend = function (e) {
  e.preventDefault() // I just removed this line and bam fixed
  clearInterval(game.movementInterval.left);
  clearInterval(game.movementInterval.right);
};
View full answer

45 Replies

African Slender-snouted CrocodileOP
should I try using an event listener
hmm, this is prolly css issue
maybe you are not clicking on div properly
African Slender-snouted CrocodileOP
no if I hold click I can see the div being highlited and mobile view on pc with dev tools does work
I personally dont think it is a css issue
hmm, I don't see any reason why the JS should not work on mobile tho :thinq:
African Slender-snouted CrocodileOP
I cant show the rest
but it does highlight when I hold it down
hmm, yeah
not a css issue
then...
so... does console not work too?
African Slender-snouted CrocodileOP
yea....
so, it's not trigerring at all
African Slender-snouted CrocodileOP
nope
can you try without arrow functions
African Slender-snouted CrocodileOP
ok
ok
links dont even work (they have target blank) but when I tried clicking on the link it didnt work
ahh
you're doing something wrong (don't say well, duh)
African Slender-snouted CrocodileOP
yea well its only when the ad is overlaying the screen
maybe its somthing wrong with the deployment
African Slender-snouted CrocodileOP
u think I should try using an event lisitiner?
prolly
read that somewhere
on stackoverflow too
African Slender-snouted CrocodileOP
man nothing is working
African Slender-snouted CrocodileOP
deploying it on a test server
ik I could use a usb for faster testing but I only have short usbs so it would be uncomfortable
@African Slender-snouted Crocodile I personally dont think it is a css issue
Sloth bear
I believe this might be a CSS issue. There might be something overlapping the clickable area on mobile devices that isn't visible. Try using the inspect tool to examine it more closely.
Also try:
<div
  className="absolute left-0 right-0 ml-auto w-24 h-24 cursor-pointer z-50"
  onClick={closeAdvertisment}
  onTouchEnd={closeAdvertisment}
>
African Slender-snouted CrocodileOP
omg I figured out the issue 🤦‍♂️
Sloth bear
What was it?
African Slender-snouted CrocodileOP
give me a moment im removing all the stuff that would violate my nda lol
African Slender-snouted CrocodileOP
window.ontouchend = function (e) {
  e.preventDefault() // I just removed this line and bam fixed
  clearInterval(game.movementInterval.left);
  clearInterval(game.movementInterval.right);
};
Answer
African Slender-snouted CrocodileOP
another dev working on the project added this
window.ontouched was named smth else so I didnt know it existed
Sloth bear
Oh i see
Well u did fix it gz 😂
African Slender-snouted CrocodileOP
these bugs always feel the worst to fix lol...
🤡 yea atleast its fixed