Menu icon Foundation
foundation slider not working on mobile?

Hi

I am having some issues with the slider controls on mobile, I get an error "Cannot read property '0' of undefined at handleTouch" when trying to drag the handle.

I tried investigating further and found that TouchList is not being passed to the touches property in the event object, does anyone know why this is?

Here is the piece of code which seems to be a problem

    var handleTouch = function handleTouch(event) {
      var touches = event.changedTouches,
          first = touches[0], //error occures here
          eventTypes = {
        touchstart: 'mousedown',
        touchmove: 'mousemove',
        touchend: 'mouseup'
      },
          type = eventTypes[event.type],
          simulatedEvent;

      if ('MouseEvent' in window && typeof window.MouseEvent === 'function') {
        simulatedEvent = new window.MouseEvent(type, {
          'bubbles': true,
          'cancelable': true,
          'screenX': first.screenX,
          'screenY': first.screenY,
          'clientX': first.clientX,
          'clientY': first.clientY
        });
      } else {
        simulatedEvent = document.createEvent('MouseEvent');
        simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /*left*/, null);
      }
      first.target.dispatchEvent(simulatedEvent);
    };

 

javascriptslidertouchrange slider

Hi

I am having some issues with the slider controls on mobile, I get an error "Cannot read property '0' of undefined at handleTouch" when trying to drag the handle.

I tried investigating further and found that TouchList is not being passed to the touches property in the event object, does anyone know why this is?

Here is the piece of code which seems to be a problem

    var handleTouch = function handleTouch(event) {
      var touches = event.changedTouches,
          first = touches[0], //error occures here
          eventTypes = {
        touchstart: 'mousedown',
        touchmove: 'mousemove',
        touchend: 'mouseup'
      },
          type = eventTypes[event.type],
          simulatedEvent;

      if ('MouseEvent' in window && typeof window.MouseEvent === 'function') {
        simulatedEvent = new window.MouseEvent(type, {
          'bubbles': true,
          'cancelable': true,
          'screenX': first.screenX,
          'screenY': first.screenY,
          'clientX': first.clientX,
          'clientY': first.clientY
        });
      } else {
        simulatedEvent = document.createEvent('MouseEvent');
        simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /*left*/, null);
      }
      first.target.dispatchEvent(simulatedEvent);
    };

 

Jeremy Lind 25 days ago

I think this problem occurs when using older versions of jQuery. See https://github.com/zurb/foundation-sites/issues/11763