Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  This example  uses jquery and a JavaScript emulation code that generates mouse events from touch events + detects two fingers gestures.
  Just add some mouseListeners to your document and it will work both with mouse inputs and touch inputs.
  
  By default the emulation code adds touch events to the document but you can adjust the JS code to add events only to any HTML element.
</body>
</html>
 
console.log("load ipadtouch.js");
$(function () {
    $.extend($.support, {
        touch: "ontouchend" in document
    });
    if ($.support.touch) {
        document.addEventListener("touchstart", iPadTouchHandler, false);
        document.addEventListener("touchmove", iPadTouchHandler, false);
        document.addEventListener("touchend", iPadTouchHandler, false);
        document.addEventListener("touchcancel", iPadTouchHandler, false);
        
        // Michel Buffa : pour traitement zoom/pinch/rotate ----------
        MBangle = 0;
        MBnewAngle=0;
        MBscale = 1;
        MBnewScale=0;
        
        document.addEventListener("gesturechange", getAngleAndScale, false);
        document.addEventListener("gestureend", saveChanges, false);
        // ------------------------------------------------------------
    }
});
//--------- Michel Buffa zoom/pinch/rotate -----------
function saveChanges() {
    MBangle = MBnewAngle;
    MBscale = MBnewScale;
}
function getAngleAndScale(e) {
    // Don't zoom or rotate the whole screen
    e.preventDefault();
    // Rotation and scale are event properties
    MBnewAngle = MBangle + e.rotation;
    MBnewScale = MBscale * e.scale;
    // Combine scale and rotation into a single transform
    var tString = "rotate(" + MBnewAngle + "deg) scale(" + MBnewScale + ")";
    //document.getElementById("theDiv").style.webkitTransform = tString;
    console.log("Gesture 2 doigts detectee : " + tString);
}
//----------------------------------------------------
var lastTap = null,
    tapValid = false,
    tapTimeout = null;
function cancelTap() {
    tapValid = false
}
var rightClickPending = false,
    rightClickEvent = null,
    holdTimeout = null,
    cancelMouseUp = false;
function cancelHold() {
    if (rightClickPending) {
        window.clearTimeout(holdTimeout);
        rightClickPending = false;
        rightClickEvent = null
    }
}
function startHold(a) {
    if (!rightClickPending) {
        rightClickPending = true;
        rightClickEvent = a.changedTouches[0];
        holdTimeout = window.setTimeout("doRightClick();", 800)
    }
}
function doRightClick() {
    rightClickPending = false;
    var a = rightClickEvent,
        b = document.createEvent("MouseEvent");
    b.initMouseEvent("mouseup", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
    a.target.dispatchEvent(b);
    b = document.createEvent("MouseEvent");
    b.initMouseEvent("mousedown", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 2, null);
    a.target.dispatchEvent(b);
    b = document.createEvent("MouseEvent");
    b.initMouseEvent("contextmenu", true, true, window, 1, a.screenX + 50, a.screenY + 5, a.clientX + 50, a.clientY + 5, false, false, false, false, 2, null);
    a.target.dispatchEvent(b);
    cancelMouseUp = true;
    rightClickEvent = null
}
function iPadTouchStart(a) {
    console.log("iPadTouchStart");
    var b = a.changedTouches[0],
        g = "mouseover",
        c = document.createEvent("MouseEvent");
    c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
    b.target.dispatchEvent(c);
    g = "mousedown";
    c = document.createEvent("MouseEvent");
    c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
    b.target.dispatchEvent(c);
    if (tapValid) {
        window.clearTimeout(tapTimeout);
        if (b.target == lastTap) {
            lastTap = null;
            tapValid = false;
            g = "click";
            c = document.createEvent("MouseEvent");
            c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
            b.target.dispatchEvent(c);
            g = "dblclick";
            c = document.createEvent("MouseEvent");
            c.initMouseEvent(g, true, true, window, 1, b.screenX, b.screenY, b.clientX, b.clientY, false, false, false, false, 0, null);
            b.target.dispatchEvent(c)
        } else {
            lastTap = b.target;
            tapValid = true;
            tapTimeout = window.setTimeout("cancelTap();", 600);
            startHold(a)
        }
    } else {
        lastTap = b.target;
        tapValid = true;
        tapTimeout = window.setTimeout("cancelTap();", 600);
        startHold(a)
    }
}
function iPadTouchHandler(a) {
    var b = "";
    if (!(a.touches.length > 1)) {
        switch (a.type) {
        case "touchstart":
            console.log("touchstart");
            if ($(a.changedTouches[0].target).is("select")) return;
            iPadTouchStart(a);
            a.preventDefault();
            return false;
        case "touchmove":
            console.log("touchmove");
            cancelHold();
            b = "mousemove";
            a.preventDefault();
            break;
        case "touchend":
            console.log("touchend");
            if (cancelMouseUp) {
                cancelMouseUp = false;
                a.preventDefault();
                return false
            }
            cancelHold();
            b = "mouseup";
            break;
        default:
            return
        }
        a = a.changedTouches[0];
        var g = document.createEvent("MouseEvent");
        g.initMouseEvent(b, true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
        a.target.dispatchEvent(g);
        if (b == "mouseup" && tapValid && a.target == lastTap) {
            g = document.createEvent("MouseEvent");
            g.initMouseEvent("click", true, true, window, 1, a.screenX, a.screenY, a.clientX, a.clientY, false, false, false, false, 0, null);
            a.target.dispatchEvent(g)
        }
    }
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers