Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The browser that supports pointer event, The Hammer doesn't work. #1084

Open
sculove opened this issue Mar 8, 2017 · 12 comments
Open

The browser that supports pointer event, The Hammer doesn't work. #1084

sculove opened this issue Mar 8, 2017 · 12 comments

Comments

@sculove
Copy link
Contributor

sculove commented Mar 8, 2017

Chrome has began supporting PointerEvent since version 55.
If you don't set inputType on Hammer.manager, Hammer use Pointer Event as a InputType.

But, Hammer.js has bug about Pointer Event.
The Hammer doesn't work anything.

related issues

#1082, #1071, #1068, #1067, #1065, #1058, #1056, #1054, #1048

@sculove
Copy link
Contributor Author

sculove commented Mar 8, 2017

I did check versions.

  • v2.0.8 ok
  • v2.0.7 ok
  • v2.0.6 ok

the master branch is broken.

sculove added a commit to sculove/hammer.js that referenced this issue Mar 8, 2017
@shubhojitroy3
Copy link

@sateffen
Copy link

sateffen commented Mar 8, 2017

The main problem is, that the "pointerout" event is connected to the INPUT_CANCEL trigger, and chrome triggers the pointerout event, just like the pointerleave event, when moving the finger one millimeter triggers the pointerout event, so the gestures will cancel at move immediatly. This might cause maybe all problems, where the default is the native pointerevents in chrome on a touch device.

The bug is a chrome bug, I filed it here

You can upvote the bug there, dunno, but as long as the bug lasts there, the pointerevents are unusable in chrome, and should not be the default.

@sculove
Copy link
Contributor Author

sculove commented Mar 8, 2017

@sateffen This seems to be another problem.
I found bug that occurred when converting to ES2015 class in hammerjs.
When using the pointer event, the calling order has changed.
Therefore, pointer event doesn't be attached. (I sent pr #1085 :))

@itaischw
Copy link

Have you tested it on mobile web?
try even do inspect and go to mobile view in chrome - select a mobile device there.
I don't see it working only if you are not in Device mode it works.
I took you branch and compiled it.

@Sembiance
Copy link

Google has marked the bug sateffen filed as: WontFix

So right now, in Chrome on Android this library has major problems.

In general though, this library appears to be abandoned and is no longer being updated/maintained. Darn.

@sateffen
Copy link

@Sembiance the main problem was me, not chrome. if you read the issue, you'll see, that I forgot to define the touch-action, which leads to unexpected behaviour in this case. Moving the finger without a touch-action defined will lead to a scroll-gesture. The browser consumes all following events, so your code gets a pointerout. If you define touch-action=none, the browser won't try to scroll, and you can handle the touch events for your gestures as you like.

The other point is pointer-capturing, which prevents pointerleave events in most cases. To get the basic idea you can read this.

That points should solve most of your problems, even with hammerjs.

@grumpygary
Copy link

grumpygary commented Nov 29, 2017

You can add the following code to the end of the assign(hammer, { ... section in v2.0.8 (at the end):

    ,supportPointerEvents(arg) { 
        return SUPPORT_POINTER_EVENTS = arg !== false && prefixed(window, 'PointerEvent') !== undefined; 
    }

Then, call Hammer.supportPointerEvents(false); on app startup (before adding instantiating items). This will effectively turn the pointer-events processing off; and make many of these problem go away (for now anyway).

@arthursp
Copy link

For those who just need the option when developing :

In hammer.js v2.0.8

line 384 : var SUPPORT_POINTER_EVENTS = false;

@Finesse
Copy link

Finesse commented Oct 20, 2019

Here is an easy-peasy solution (no need to modify the library code):

const hammer = new Hammer(
  document.getElementById('gesture-element'),
  { inputClass: Hammer.TouchMouseInput } // Does the trick
);
hammer.on('swipe', event => {
  console.log('Swipe works');
});

I tested in with Hammer 2.0.8 on Chrome (Mac), Safari (Mac and iOS 13) and iOS 13 webview.

@iblatnick
Copy link

So running into similar issues with Hammer however nothing here is working, when I disabled touch-action it completely killed scrolling for me, but translateX was working fine as I handle that myself, the problem I'm having is when I try to use both in conjunction the browser is hijacking my horizontal gestures and treating them as scrolls.

@AndreVanKammen
Copy link

I've tried to implement something with pointer-events in chrome but I run into so many bugs i'm thinking about switching back to mouse and touch.

-On windows desktop I don't get a mouse event for a secondly pressed button (2 buttons down)
-On android it's just a mess, i have a Note 10 lite
-1st I get a mouse event, secondly the pen, both are marked primary only pen gets updated
-Pen constantly generates new pointer-id's
-Touches also generate new id's after down so I loose track

I have an example with output running here:

https://shadersynth.com/pointer-test.html

It returns the info of the last primary pointer, all code is unobfuscated on that site.

I should report this on chrome somewhere? If somebody has a link i will report it there, this was the 1st place i could find mention of problems with pointer-events,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants