Mobile Touch to Click Event

Webflow's Interactions ( IX2 ) supports a number of triggers around mouse movement- however these do not translate to pointerless devices like a phone or tablet.

These devices trigger different events, like;

• touchstart
• touchend
• touchmove

This means that many Webflow interactions won't work on mobile devices.

Solution

In many cases, it's possible to capture these events and then to generate a sympathetic mouse event, which will then correctly trigger Webflow's interactions.

However, you can achieve this same effect with a "hidden" tab, which is set as the default, and which can be re-selected later using custom code.

Here I have an element with the class container , which we observe for touch events, and sympathetically generate mouse events.

Place this code in the before-/body section of your page.

<script>
const imageContainer = document.querySelector('.container');

// Trigger sympathetic mousemove event
function triggerMouseEvent(type, originalEvent) {
  const touch = originalEvent.touches[0]; 
  const mouseEvent = new MouseEvent(type, {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  originalEvent.target.dispatchEvent(mouseEvent);
}

// Add touch event listeners
imageContainer.addEventListener('touchmove', (event) => {
  triggerMouseEvent('mousemove', event);
});
imageContainer.addEventListener('touchstart', (event) => {
  triggerMouseEvent('mouseenter', event);
});
imageContainer.addEventListener('touchend', (event) => {
  triggerMouseEvent('mouseleave', event);
});
</script>

Resources

Forum discussion
https://discourse.webflow.com/t/no-touch-support/300597

‍

‍