Search code examples
javascriptipadtouchtablettouchscreen

Javascript touchscreen event like a mousewheel DOMMouseScroll

Hello i need touch screen event which works as mousewheel DOMMouseScroll I making website like google maps and with touch event i need make functionality to zoom in and out..

Need works like this image:

enter image description here

Solution

  • Try this one:

    https://github.com/se468/JavascriptGestureHandler

    It will do both mouse and touch events depending on whichever device.

    Edit:

    Here I will put more detail as suggested.

    In Javascript, there are "touchstart", "touchend", "touchcancel", "touchleave", "touchmove" events.

    For example, if you have a DOM object like this:

    <div id="target" style="width: 100px; height: 100px; background: #ff0"></div>

    In Javascript you can attach events as following (same goes for other events):

    $("#target").addEventListener("touchstart",function(e){console.log(e.changedTouches)},false);

    so for pinch zoom, you'd want to check if e.changedTouches.length >= 2 inside the function.

    • e.changedTouches[0].pageX and e.changedTouches[0].pageY will give you the coordinates of one finger
    • e.changedTouches[1].pageX and e.changedTouches[1].pageY will give coordinates at the other finger.

    Check the change in distance between those touch points when "touchmove" event occurs and that value should give the amount it should zoom-in and zoom-out.