0

Fairly new to programming and only work in Javascript (so far). I'm building a site where you can click through pictures. It works like a charm on PC, Mac and in an Android smart phone, but when I try it in iPad (Chrome) and on iPhone (both Chrome and Safari) some clicks don't trigger the functions. Is this a common problem? I add event listeners as follows.

document.getElementById("displayRight" + count).addEventListener("click", triggerRight);

The functions look like this:

function triggerRight() {

var compare = activeElement;
getIdRight();
if (compare === activeElement) {

    slideIndex = slideIndex + 1;
} else {
    slideIndex = 2;
}

slidePic();
}

function slidePic() {

var i;
var x = document.getElementsByClassName("mySlides" + activeElement);

if (slideIndex > x.length) {
    slideIndex = 1;
}

if (slideIndex < 1) {
    slideIndex = x.length;
}

for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}

x[slideIndex - 1].style.display = "block";
}
aydinugur
  • 1,208
  • 2
  • 14
  • 21
Django Joe
  • 39
  • 7
  • I've had a similar problem before, this answer helped me fix it in my web app: https://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios – Zach A Oct 08 '17 at 17:37
  • It looks like a dream, but won't work. I tried `*{cursor: pointer;}` in my CSS but can't get it to work. How did you solve it? @ZachA – Django Joe Oct 08 '17 at 18:11
  • Here is an article that goes deeper into the issue: https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html It has a workaround listed as well. The cursor: pointer trick seems to be a widely used approach but also seems that it doesn't work if you apply the styling to a :hover, so I'm worried using * to set it might be working against you. Try styling only the affected elements with the pointer trick. Otherwise I'm not sure where the problem is arising since it works as expected on the other OSes. – Zach A Oct 08 '17 at 18:37

1 Answers1

0

Apple iOS uses "touch" events. You probably want to test and abstract the click/touch events like the following:

var trgEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

document.getElementById("displayRight" + count).addEventListener(trgEvent, triggerRight);
kenn
  • 57
  • 3
  • It looks like a good and very logic solution, unfortunately I can't get it to work. The functions doesn't trigger on the computer or phone now. I switched all `click` to `trgEvent`. @kenn – Django Joe Oct 08 '17 at 18:18
  • Also, what does `?` after `window` mean? @kenn – Django Joe Oct 08 '17 at 18:38
  • That's a shorthand for an if else statement (ternary operator): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator @Django Joe – Zach A Oct 08 '17 at 18:44