Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why are left and top properties disabled when using TouchMove-event

When using onmousemove the left and top properties are enabled and i can drag the div element but when trying to use the same properties while using ontouchmove they are disabled:
The properties are disabled the moment i use the inbuilt browser touch move emulation

Why is that?

Tags:

2

Answers


  1. 0

    The issue you’re facing is due to the difference in the way touch events and mouse events are handled in browsers. When using onmousemove, the left and top properties are enabled because the browser knows that you’re dealing with a mouse event. On the other hand, when using ontouchmove, the browser doesn’t know what to do with the left and top properties because it’s expecting touch events.

    To solve this issue, you can use the touch events instead of the mouse events. The touch events are touchstart, touchmove, and touchend. These events provide the same functionality as the mouse events, but they’re specifically designed for touch devices.

    Here’s an example of how you can use the touch events to achieve the same functionality as the mouse events:

    var isTouching = false;
var startX, startY;

function handleTouchStart(e) {
  isTouching = true;
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}

function handleTouchMove(e) {
  if (!isTouching) return;

  var dx = e.touches[0].clientX - startX;
  var dy = e.touches[0].clientY - startY;

  var myHeader = $("header");

  if (Math.abs(dy) > Math.abs(dx)) {
    if (dy > 700) {
      $(myHeader).slideUp(400);
    } else {
      $(myHeader).slideDown(800);
    }
  }
}

function handleTouchEnd() {
  isTouching = false;
}

document.addEventListener("touchstart", handleTouchStart, false);
document.addEventListener("touchmove", handleTouchMove, false);
document.addEventListener("touchend", handleTouchEnd, false);

    In this code, we’re using the touchstart, touchmove, and touchend events to handle the dragging of the div element. We’re also using the Math.abs() function to calculate the absolute values of the horizontal and vertical movements. This ensures that the header will only slide up or down when the user is scrolling vertically.

    Login or Signup to reply.
  2. 0

    an event touchMove have a property (like the another touchEvent) touches. You can to have more than one touche.

    If you get the first one you have the properties of a "touch": ScreenX, screenY,clientX,clientY and pageX,pageY.

    typical, when we want to manage mousemove and touchmove togueter you can use merge + fromEvent + map in the way

    const el=... (an HTMLElement)
obs$=merge(
      fromEvent(el, 'mousemove'),
      fromEvent(el, 'touchmove').pipe(
        map((event: TouchEvent) => event.touches[0])
      )

    So obs$ is an observable and when you subscribe you have in respose the properties clientX,clientY,…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search