.addEventListener('click', classToggle) not working on touch devices

Asked Oct 30 '18 at 10:12

Active Oct 30 '18 at 10:23

Viewed 88 times

I got a Javascript function that changes between two CSS classes for a button (it changes its background color) when the button is clicked.

<button id="div" class="class1" onclick ="change();">ON / OFF</button>

function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);

In know that the 'click' event will not work on touch devices, but i have tried with 'touchastart' and 'touchend' but nothing seems to be working.

I guess the problem is that i cant figure out where to specify the touch friendly addeventlistener??

I can not figure out why, so i hope someone more knowledgeable can help :-)

Best regards

edited Oct 30 '18 at 10:23

asked Oct 30 '18 at 10:12

Kristian

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events – Zakaria Acharki Oct 30 '18 at 10:16
Hi Zakaria, i have read a lot of post here on stackoverflow, and other places. But i cant seem to figure out where to state the other eventlistener, and i cant find examples that looks like mine. Could you maybe assist me with this? – Kristian Oct 30 '18 at 10:25
Try to remove the inline `onclick =` and attach the event just from the js using `addEventListener` – Zakaria Acharki Oct 30 '18 at 10:28
The problem is that onclick = triggers another function from the button – Kristian Oct 30 '18 at 10:31
You should then call the function `change()` also inside the `addEventListener` – Zakaria Acharki Oct 30 '18 at 10:48
But the eventlistener is what is not working on mobile..... Is it not possible to just ad touchstart to the eventlistener? like this .addEventListener('click touchstart', classToggle) or something like this? – Kristian Oct 30 '18 at 10:53
Could be like `"click touchstart".split(" ").forEach(function(e){ window.addEventListener(e,change,false); });` – Zakaria Acharki Oct 30 '18 at 11:31
Thank you Zakaria! – Kristian Oct 31 '18 at 12:40
You're welcome, anytime. – Zakaria Acharki Oct 31 '18 at 15:04

.addEventListener('click', classToggle) not working on touch devices

0 Answers0