Create event for "mouse click" and "touch click" separately

Question

Hi all,

I want to know what is the best way to create an event listener for "mouse click" and "touch click" to do difference thing?
I now have player framework to play video and want to let "mouse click" click the video frame to play/pause video and let "touch click" to show the player control (Player control will also shown when mouse move).

Now I created an onclick event to play/pause video but when I use touchscreen to click on it, it does the same with mouse.

Thanks in advanced, and sorry for my bad English.

Answer 1

For this you'll need to use the MSPointerDown event rather than click, because MSPointerDown's event args contains the pointer type. For example:

divElement.addEventListener("MSPointerMove", pointerMove);

function pointerDown(e) {
    console.log("pointerDown type=" + e.pointerType);
}

e.pointerType will be 2 for touch, 3 for stylus, 4 for mouse. So far as I know, the "click" event doesn't provide this data, so you need to use MSPointerDown.

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Answer 2

Thanks Kraig. I know that MSPointerDown contains the pointer type that I can verify touch or mouse, but as far as I know this event act like a "mousedown" event not "click" event (occurred when mousedown and mouseup in the same object in order).  But I think this is easiest way for my scenario even though it's not exactly what I want. Thanks again :).