0

I have a div with id "btn", and add two listeners to this div. 

btn.addEventListener('click'){
    console.log('click')
}

and 

btn.addEventListener('mouseover'){
    console.log('mouseover')
}

So when I turn on to chrome mobile simulator and I click on this div the result is 'click' AND 'mouseover'.

My question is how I can separate this two listeners. For example when I click on this button I want to fire just click event or just mouseover event, not both.

Thanks

Charlie
  • 490
  • 8
  • 22
BigApp7e
  • 11
  • 1
  • 2

2 Answers2

0

When you click both events occur. Like first mouse goes there so mouseover event occur and then click event occur on clicking.

Muzaffar Mahmood
  • 1,016
  • 2
  • 11
  • 17
0

If you don't need both, just remove one of them. If you need to have them both, but only want one of them to fire when a mobile device is being used, see below.

Both are fired because both actions (click and mousover) are physically occurring. To my knowledge, there is no way to block one of them.

However, you could add a condition in one of them that prevents the program from going further if the user is using a mobile device, e.g.

btn.addEventListener('click'){
   if (!/Mobi|Android/i.test(navigator.userAgent)) {
        // This will only fire if the user is NOT using a mobile device
        console.log('click')
   }
}

btn.addEventListener('mouseover'){
    // This will fire every time
    console.log('mouseover')
}

There are different ways to test if a mobile device is being used, which you'd be better off asking about in a separate question should you need to, but this should help you get started

Charlie
  • 490
  • 8
  • 22