事件touchstart在iPhone上不起作用

Question

I have some code that generally works, except on iPhone. When the window loads, this function is called. When I have the event as click , it works just fine on desktop, but not on mobile. I've tried looking around for solutions for mobile, and touchstart seems to be the recommended solution. But, though it works on emulators, it doesn't work on iPhone (tested on the latest OS version). Am I missing something?

function addXClassOnClick() {
  var els = document.getElementsByClassName('item');

  Array.prototype.forEach.call(els, function(el) {
    el.addEventListener('touchstart', function() {
      el.parentElement.classList.toggle('x');
    }, false);
  });
}

Thanks in advance!

Answer 1

Probably a duplicate of this SO question .

If you're using an <a> tag, everything will work as expected on iPhones and other touch devices. Otherwise, you should add CSS to whatever element with style cursor: pointer; .

Answer 2

Given the document fragment:

<div class="x">
    <div class="item">Item</div>
</div>

The anonymous event handler function's default scope is bound to the clicked element, and not to the clicked element's parent, which is the scope that classList.toggle should operate on.

(edit: According to the documentation, forEach passes undefined in as the scope of the callback function when not specified. The DOM element reference el has no scope to operate in. It's like the DOM is there, but the scope chain isn't.)

To fix this, either call classList.toggle with the correct scope:

el.parentElement.classList.toggle.call(el.parentElement.classList, 'x');

or call forEach with the desired scope as a second argument:

Array.prototype.forEach.call(els, function(el) {
    // omit
}, els);