We Keep Coding

How to convert touch event to mouse drag event

On implementing drag-n-drop of an image for touch devices, I have a problem converting touch events to mouse events. Events are not dispatched or don't work as supposed. I used this guide and learnt other answers.
To minimize the question, I'll narrow to the drag event only, without drop. Hopefully if it's solved, the other part will be solved, too. When I drag the image with mouse, I get the desired behavior - the ghostly image and the changed cursor:
I need to have the same ghostly image when touch-drag on a device, but no luck:
In order to achieve the desired behavior, I try to simulate a mouse event when touch event happens.
<img id="hammer" src="https://i.stack.imgur.com/9oV2e.png" />
<script>
var hammer = document.getElementById("hammer");
hammer.addEventListener("touchstart", touchHandler, true);
hammer.addEventListener("touchmove", touchHandler, true);
function touchHandler(event) {
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type) {
case "touchstart": type = "dragstart"; break;
case "touchmove": type = "drag"; break;
default: return;
}
var 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*/, first.target);
this.dispatchEvent(simulatedEvent);
event.preventDefault();
}
</script>
The fiddle
It seems that the touch events are not converted to drag events. How can I achieve it? If I add EventListeners to document instead of hammer, I get an error. If I wrap hammer with a container div, and addEventListener to the container, it gives no success, too. If I change type = "drag" to type = "mousemove", no difference.

Can I use both "onmousedown" and "ontouchstart" for a button? [duplicate]

Working on a website that is also viewable on mobile and need to bind an action on both touchstart and mousedown.
Looks like this
$("#roll").bind("mousedown touchstart", function(event){
someAction();
It works fine on Iphone, but on Android it responds twice.
event.stopPropagation();
event.preventDefault();
Adding this code fixed it for Android Chrome, but NOT for Android default browser. Any other tricks that can fix the problem for all android?

element.on('touchstart mousedown', function(e) {
e.preventDefault();
someAction();
});
preventDefault cancels the event, as per specs
You get touchstart, but once you cancel it you no longer get mousedown. Contrary to what the accepted answer says, you don't need to call stopPropagation unless it's something you need. The event will propagate normally even when cancelled. The browser will ignore it, but your hooks will still work.
Mozilla agrees with me on this one:
calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing
EDIT: I just read the question again and you say that you already did this and it didn't fix the Android default browser. Not sure how the accepted answer helped, as it does the same thing basically, just in a more complicated way and with an event propagation bug (touchstart doesn't propagate, but click does)

I have been using this function:
//touch click helper
(function ($) {
$.fn.tclick = function (onclick) {
this.bind("touchstart", function (e) {
onclick.call(this, e);
e.stopPropagation();
e.preventDefault();
});
this.bind("click", function (e) {
onclick.call(this, e); //substitute mousedown event for exact same result as touchstart
});
return this;
};
})(jQuery);
UPDATE: Modified answer to support mouse and touch events together.

taking gregers comment on win8 and chrome/firefox into account, skyisred's comment doesn't look that dumb after all (:P # all the haters)
though I would rather go with a blacklist than with a whitelist which he suggested, only excluding Android from touch-binds:
var ua = navigator.userAgent.toLowerCase(),
isAndroid = ua.indexOf("android") != -1,
supportsPointer = !!window.navigator.msPointerEnabled,
ev_pointer = function(e) { ... }, // function to handle IE10's pointer events
ev_touch = function(e) { ... }, // function to handle touch events
ev_mouse = function(e) { ... }; // function to handle mouse events
if (supportsPointer) { // IE10 / Pointer Events
// reset binds
$("yourSelectorHere").on('MSPointerDown MSPointerMove MSPointerUp', ev_pointer);
} else {
$("yourSelectorHere").on('touchstart touchmove touchend', ev_touch); // touch events
if(!isAndroid) {
// in androids native browser mouse events are sometimes triggered directly w/o a preceding touchevent (most likely a bug)
// bug confirmed in android 4.0.3 and 4.1.2
$("yourSelectorHere").on('mousedown mousemove mouseup mouseleave', ev_mouse); // mouse events
}
}
BTW: I found that mouse-events are NOT always triggered (if stopPropagation and preventDefault were used), specifically I only noticed an extra mousemove directly before a touchend event... really weird bug but the above code fixed it for me across all (tested OSX, Win, iOS 5+6, Android 2+4 each with native browser, Chrome, Firefox, IE, Safari and Opera, if available) platforms.

Wow, so many answers in this and the related question, but non of them worked for me (Chrome, mobil responsive, mousedown + touchstart). But this:
(e) => {
if(typeof(window.ontouchstart) != 'undefined' && e.type == 'mousedown') return;
// do anything...
}

Fixed using this code
var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var start = mobile ? "touchstart" : "mousedown";
$("#roll").bind(start, function(event){

This is a very old question but I came across the same problem and found another solution that does not stopPropagation(), preventDefault() or sniff the type of device. I work on this solution with the assumption that the device supports both touch and mouse inputs.
Explanation: When a touch is initiated, the order of events is 1) touchstart 2) touchmove 3) touchend 4) mousemove 5) mousedown 6) mouseup 7) click. Based on this, we will mark a touch interaction from touchstart (first in chain) until click (last in chain). If a mousedown is registered outside of this touch interaction, it is safe to be picked up.
Below is the logic in Dart, should be very replicable in js.
var touchStarted = false;
document.onMouseDown.listen((evt) {
if (!touchStarted) processInput(evt);
});
document.onClick.listen((evt) {
touchStarted = false;
});
document.onTouchStart.listen((evt) {
touchStarted = true;
processInput(evt);
});
As you can see my listeners are placed on document. It is thus crucial that I do not stopPropagation() or preventDefault() these events so they can bubble up to other elements. This solution helped me single out one interaction to act on and hope it helps you too!

I recommend you try jquery-fast-click. I tried the other approach on this question and others. Each fixed one issue, and introduced another. fast-click worked the first time on Android, ios, desktop, and desktop touch browsers (groan).

Write this code and add j query punch touch js.it will work simulate mouse events with touch events
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var 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);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}

This native solution worked best for me:
Add a touchstart event to the document settings a global touch = true.
In the mousedown/touchstart handler, prevent all mousedown events when a touch screen is detected: if (touch && e.type === 'mousedown') return;

I think the best way is :
var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' );
document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) {
console.log( e.touches ? 'TouchEvent' : 'MouseEvent' );
}, false );

Safari iPad 1: how to disable zoom/centering on double-tap, but keep pinch zoom

I wonder if its possible to prevent double-tap-to-zoom and double-tap-to-center on a specific HTML element in Safari iOS (iPad 1) ?
Because my small HTML5 game forces users to make fast clicks (or taps), which are interpreted as double clicks, and when it happens - the page changes zoom and centers itself.
Detecting double clicks (like in this answer - Safari iPad : prevent zoom on double-tap) smells bad..
Wrong answer #1:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> - does not suit my purposes, because it will block any zoom.
Wrong answer #2: maybe would .preventDefault() on click event alone be enough for that ? - Does not have any effect.

There's no other way than catching the events you want to prevent, and call preventDefault() on them, as you had already more or less figured out.
Indeed, some particular CSS properties / values may change the global site behavior (fixed width or fixed, for example), but you're not safe from changes to the OS (see fixedhandling change in iOS5), nor do these changes necessarily prevent all behavior (pinch might be off, but not double-tapping).
So, the best way to disable default behavior only for double-tapping is to take advantage of the count of touches iOS provides: if we have only one contact, then we're tapping. Two, this means we're pinching.
The following setup code provides that functionality:
var elm = document.body; // or some selection of the element you want to disable
var catcher = function(evt) {
if (evt.touches.length < 2)
evt.preventDefault();
};
elm.addEventListener('touchstart', catcher, true);
Demo on jsFiddle.
Note: the third parameter (true) to addEventListener means that we want to capture events, that is catch them all, even for our descendant children.

I am preventing doubletaps like this:
var doubleTouchStartTimestamp = 0;
$(document).bind("touchstart", function (event) {
var now = +(new Date());
if (doubleTouchStartTimestamp + 500 > now) {
event.preventDefault();
}
doubleTouchStartTimestamp = now;
});
The elegance lies within the fact, that no timeouts are needed. I only update a timestamp. It only gets compared on the next touchstart. Works for me on iOS 6.
Doubletaps further down the dom are not affected.
The same works without jQuery, as well:
var doubleTouchStartTimestamp = 0;
document.addEventListener("touchstart", function (event) {
var now = +(new Date());
if (doubleTouchStartTimestamp + 500 > now) {
event.preventDefault();
}
doubleTouchStartTimestamp = now;
});

I wrote a jQuery plugin for the same purpose - selectively disabling double-tap zoom on given page elements (in my case, navigation buttons to flip pages) I want to respond to every tap (including double-tap) as a normal click event, with no iOS "touch magic", no matter how fast the user clicks it.
To use it, just run something like $('.prev,.next').nodoubletapzoom(); on the elements you care for. The principle it uses is to listen for consecutive touchstart events on a node within 500ms, and running event.preventDefault() on the second, unless other touches are active at the same time. As that preventDefault consumes both touches, we also synthesize the two "missed" click events for the node, so your intended touch action happens as many times as the user intended.

Apple has a lot of tips with specialized tags for webkit (Safari). View Official Docs

What iOS version/Safari browser are you using? That site most definitely does not let you double-tap. I found some CSS but haven't had time to try it as I'm about to step out:
body {
-webkit-text-size-adjust:none;
margin:0px;
}
div{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}

You will need to implement a double tap function and preventDefault on the second tap. Here is some tested code that uses global variables that should get you started:
<button id="test1">Double Tap Me!</button>
<div id="test2">EMPTY</div>
var elm1 = document.getElementById('test1');
var elm2 = document.getElementById('test2');
var timeout;
var lastTap = 0;
elm1.addEventListener('touchend', function(event) {
var currentTime = new Date().getTime();
var tapLength = currentTime - lastTap;
clearTimeout(timeout);
if (tapLength < 500 && tapLength > 0) {
elm2.innerHTML = 'Double Tap';
event.preventDefault();
} else {
elm2.innerHTML = 'Single Tap';
timeout = setTimeout(function() {
elm2.innerHTML = 'Single Tap (timeout)';
clearTimeout(timeout);
}, 500);
}
lastTap = currentTime;
});
And a fiddle: http://jsfiddle.net/brettwp/J4djY/

JQuery approach to disable Double Tap Zoom in MVC4
To Disable the double tap (double mouse down) functionality on iOS 1+ you need to catch the touchStart Event and create an override to prevent the zoom.
// Using Single script.js and JQuery.Mobile-1.2.0 UI each page in MVC gets assigned JQuery through delegates so you don't have to do a full refresh of the page allowing you to take advantage of the data-prefetch which loads the page in the DOM when the app loads for the first time
$(document).delegate("#CashRegister", "pageinit", function () {
// To Disable 'Pinch to Zoom' Note: don't implement gester event handlers if you want to
//keep pinch to zoom functionality NOTE: i use this as my pageinit is a delegate of a page
this.addEventListener("gesturestart", gestureStart, false);
this.addEventListener("gesturechange", gestureChange, false);
this.addEventListener("gestureend", gestureEnd, false);
//handle each event by disabling the defaults
function gestureStart(event) {
event.preventDefault();
}
function gestureChange(event) {
event.preventDefault();
}
function gestureEnd(event) {
event.preventDefault();
}
//Recreate Double Tap and preventDefault on it
$(this).bind('touchstart', function preventZoom(e) {
// recreate the double tab functionality
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});

Actually, .preventDefault() definitely does work... using jQuery:
var InputHandler = {
startEventType : isTouch ? "touchstart" : "mousedown"
}
$(selector).bind(InputHandler.startEventType, function(evnt) {
evnt.preventDefault();
});
Your problem with trying to prevent on .click() is that the browser isn't throwing a "click" element. Safari only fires a click to help simulate a click... But when there's a double tab, Safair doesn't through a "click" element. Your event handler for .click() doesn't ever fire, and therefore the .preventDefault() doesn't fire either.

JavaScript mapping touch events to mouse events

I'm using the YUI slider that operates with mouse move events. I want to make it respond to touchmove events (iPhone and Android). How can I produce a mouse move event when a touchmove event occurs? I'm hoping that just by adding some script at the top that touchmove events will get mapped to the mouse move events and I won't have to change anything with the slider.

I am sure this is what you want:
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var 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);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
I've captured the touch events and then manually fired my own mouse events to match. Although the code isn't particularly general purpose as is, it should be trivial to adapt to most existing drag and drop libraries, and probably most existing mouse event code. Hopefully this idea will come in handy to people developing web applications for the iPhone.
Update:
In posting this, I noticed that calling preventDefault on all touch events will prevent links from working properly. The main reason to call preventDefault at all is to stop the phone from scrolling, and you can do that by calling it only on the touchmove callback. The only downside to doing it this way is that the iPhone will sometimes display its hover popup over the drag origin. If I discover a way to prevent that, I'll update this post.
Second Update:
I've found the CSS property to turn off the callout: -webkit-touch-callout.

I finally found a way to get this working using Mickey's solution but instead of his init function. Use the init function here.
function init() {
document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true);
document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true);
document.getElementById('filter_div').addEventListener("touchend", touchHandler, true);
document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true);
}
If you see 'filter_div' is the chart area where we have the chart range filter and only in that area do we want to rewrite our touch controls!
Thank you Mickey. It was a great solution.

Along the lines of #Mickey Shine's answer, Touch Punch provides mapping of touch events to click events. It's built to put this support into jQuery UI, but the code is informative.

For future users, who comeback here the following code might be used :
var eventMap = {};
(function(){
var eventReplacement = {
"mousedown": ["touchstart mousedown", "mousedown"],
"mouseup": ["touchend mouseup", "mouseup"],
"click": ["touchstart click", "click"],
"mousemove": ["touchmove mousemove", "mousemove"]
};
for (i in eventReplacement) {
if (typeof window["on" + eventReplacement[i][0]] == "object") {
eventMap[i] = eventReplacement[i][0];
}
else {
eventMap[i] = eventReplacement[i][1];
};
};
})();
And then in the events use like following :
$(".yourDiv").on(eventMap.mouseup, function(event) {
//your code
}

For making #Mickey's code work on Edge and internet explorer, add the following lines in .css of the element where you want the simulation to happen:
.areaWhereSimulationHappens {
overflow: hidden;
touch-action: none;
-ms-touch-action: none;
}
These lines prevent the default touch for edge and IE. But if you add it to the wrong element, then it also disables scroll (which happens by default on edge and IE on touch devices).

I just discovered this code resolving, i'm stuck on this situation in which I would like to put touch events and mouse event:
https://codepen.io/benstl/details/LYQjKvN
I supposed I have to add in te html the touchevents in the line :
div class="cube" onmousedown="grabOn(true)" onmouseup="grabOff()">
and on the javascript on :
document.addEventListener('mouseup', grabOff);
document.addEventListener('mousemove', handleMouseMove);
But there's also the grab function to link to either.

Ignoring/canceling browser drag for JavaScript drag & drop

I'm implementing a drag & drop script in (plain) JavaScript. All good, except one thing. For example, in Firefox (probably not only there), if you drag an object the second time, it is getting dragged as a built-in browser feature (for easy drag & drop image saving to desktop, for example, I think). Well this kind of ruins my script.
Thing is, I know this is possible, and I've even done it before, but that was like a long time and I got it working by trial and error, just entered focus() and blur() all over the place 'till it seemed to actually loose focus.
So if someone knows how to clear this out for me, he'd be my personal hero. Blur() on the dragging object? focus() on a different one? etc.
Thanks!
//Ok, the parts of the code regarding this would be:
...
this.handle.onmousedown = function(e)
{
self.startDragging(e);
};
this.handle.onmouseup = function(e)
{
self.stopDragging(e);
};
setInterval(function(){self.animate()}, 25);
...
startDragging: function(e)
{
this.dragging = true;
},
stopDragging: function(e)
{
this.dragging = false;
},
animate: function()
{
if(this.dragging)
...

Unless I misinterpreted your question, try event.preventDefault(); in your mousedown event listener. It would help if you could provide snippets of code to show us how you are implementing drag/drop.
Edit: With your implementation, something like this should work:
this.handle.onmousedown = function(e) {
if(!e) e = window.event;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
self.startDragging(e);
};
However, I would recommend using event listeners instead.