Click here to Skip to main content
16,016,425 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionRecording audio in Unity WebGL game Pin
G. Filkov19-Sep-24 14:13
G. Filkov19-Sep-24 14:13 
Questionimage scrolling Pin
Member 131084951-Sep-24 16:12
Member 131084951-Sep-24 16:12 
AnswerRe: image scrolling Pin
Dave Kreskowiak1-Sep-24 18:27
mveDave Kreskowiak1-Sep-24 18:27 
AnswerRe: image scrolling Pin
RedDk2-Sep-24 9:26
RedDk2-Sep-24 9:26 
AnswerRe: image scrolling Pin
Richard Deeming2-Sep-24 21:11
mveRichard Deeming2-Sep-24 21:11 
GeneralRe: image scrolling Pin
RedDk3-Sep-24 8:04
RedDk3-Sep-24 8:04 
QuestionMapping Touchscreen Events to Mouse Events Pin
Steve Raw17-Aug-24 13:38
professionalSteve Raw17-Aug-24 13:38 
Do any of you have experience with something like this?

I spent most of yesterday experimenting. I originally designed my project to run on a laptop, or desktop computer with a keyboard and mouse. I omitted touchscreen functionality on the website up until recently. I became curious about an idea, and I had to see if it was possible and practical for implementation.

Is it possible to convert touchscreen interaction events (e.g. 'touchstart', 'touchend', 'touchmove', 'touchcancel') to automatically dispatch the corresponding synthetic mouse events? For example, would it be possible to touch the screen, move your finger, and make it behave as a mousemove event? It might be. So, I had to find out.

You'd think there would be a standardized way to accomplish this sort of thing. As more websites are accessed through touchscreen tablets, developers who didn't have a need for touchscreen functionality before must now implement it, or risk being left behind in the stone age.

I spent a few hours digging around to see how it could be done. I didn't find much at all, and neither did I see any sort of standardized way to map touch events to mouse events. I did find a simple set of methods that are claimed to work, so I tried them out. It was crude and inadequate, but I found proof of concept that it's possible.

Below are the two sample methods that I used for reference. The source URL is also included.
JavaScript mapping touch events to mouse events[^]
JavaScript
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);    
}
These two methods serve as basic examples to illustrate how the event mapping can be done. It's impractical to put them to use, but it conveys the concept well. As for developing this feature in a real-life scenario, it can be done, but only with a vast amount of effort, a lot of complex code, and a lot of time to spare.
AnswerRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon20-Aug-24 13:02
professionalJeremy Falcon20-Aug-24 13:02 
RantRe: Mapping Touchscreen Events to Mouse Events Pin
Richard Deeming20-Aug-24 18:54
mveRichard Deeming20-Aug-24 18:54 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon21-Aug-24 4:22
professionalJeremy Falcon21-Aug-24 4:22 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Chris Maunder21-Aug-24 9:41
cofounderChris Maunder21-Aug-24 9:41 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon21-Aug-24 9:52
professionalJeremy Falcon21-Aug-24 9:52 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Chris Maunder21-Aug-24 9:53
cofounderChris Maunder21-Aug-24 9:53 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon21-Aug-24 9:57
professionalJeremy Falcon21-Aug-24 9:57 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Steve Raw20-Aug-24 20:49
professionalSteve Raw20-Aug-24 20:49 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon21-Aug-24 4:39
professionalJeremy Falcon21-Aug-24 4:39 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Steve Raw21-Aug-24 8:22
professionalSteve Raw21-Aug-24 8:22 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon21-Aug-24 9:48
professionalJeremy Falcon21-Aug-24 9:48 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Steve Raw21-Aug-24 17:24
professionalSteve Raw21-Aug-24 17:24 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon21-Aug-24 17:40
professionalJeremy Falcon21-Aug-24 17:40 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Steve Raw21-Aug-24 17:56
professionalSteve Raw21-Aug-24 17:56 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon22-Aug-24 2:02
professionalJeremy Falcon22-Aug-24 2:02 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon22-Aug-24 2:30
professionalJeremy Falcon22-Aug-24 2:30 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Steve Raw22-Aug-24 4:21
professionalSteve Raw22-Aug-24 4:21 
GeneralRe: Mapping Touchscreen Events to Mouse Events Pin
Jeremy Falcon22-Aug-24 6:44
professionalJeremy Falcon22-Aug-24 6:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.