plutopot

pointerover/touch not working on mobile browser

Recommended Posts

Hi,

I am making a game that requires the pointerover event, but on mobile devices its not working, I have tried touchMove but its behavior is really weird on the browsers and seems like there's a bug in the library, can anyone provide a second thought on this?

Thank you.

Share this post


Link to post
Share on other sites

 

    var isSupportPassive = Utils.isSupportPassiveEvent();
    document.addEventListener('mousedown', this._onMouseDown.bind(this));
    document.addEventListener('mousemove', this._onMouseMove.bind(this));
    document.addEventListener('mouseup', this._onMouseUp.bind(this));
    document.addEventListener('wheel', this._onWheel.bind(this));
    document.addEventListener('touchstart', this._onTouchStart.bind(this), isSupportPassive ? {passive: false} : false);
    document.addEventListener('touchmove', this._onTouchMove.bind(this), isSupportPassive ? {passive: false} : false);
    document.addEventListener('touchend', this._onTouchEnd.bind(this));
    document.addEventListener('touchcancel', this._onTouchCancel.bind(this));
    document.addEventListener('pointerdown', this._onPointerDown.bind(this));

 

also take a look on the new device usb debugger in the developer tool

image.thumb.png.58e25709be6d3bb7a851e833c56b027d.png

image.thumb.png.243563ea3a85a8947d83c3bc4eb4df8d.png

i not yet tested but you can connect your device with usb to emulate your app on your device, similar at what INTEL XDK  can do.

Share this post


Link to post
Share on other sites

for isSupportPassiveEvent

Utils._supportPassiveEvent = null;
/**
 * Test this browser support passive event feature
 * 
 * @static
 * @method isSupportPassiveEvent
 * @return {Boolean} this browser support passive event or not
 */
Utils.isSupportPassiveEvent = function() {
    if (typeof Utils._supportPassiveEvent === "boolean") {
        return Utils._supportPassiveEvent;
    }
    // test support passive event
    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
    var passive = false;
    var options = Object.defineProperty({}, "passive", {
        get: function() { passive = true; }
    });
    window.addEventListener("test", null, options);
    Utils._supportPassiveEvent = passive;
    return passive;
}

 

Share this post


Link to post
Share on other sites

`pointerover` (and similar events) work on mobile when the finger is down, but you must opt into that behavior. For example, once `pointerdown` fires, if you move your finger, you can use `pointerover` as it moves onto different elements.

See here for details:

https://github.com/w3c/pointerevents/issues/346

Here is a demo that works on mobile (drag with your finger starting on the cell on which the cube is):

https://cdpn.io/trusktr/debug/eYdPOKb

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.