locked
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.

    Tuesday, May 28, 2013 6:33 AM

Answers

  • 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


    Tuesday, May 28, 2013 5:04 PM

All replies

  • 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


    Tuesday, May 28, 2013 5:04 PM
  • 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 :).
    Wednesday, May 29, 2013 4:52 AM