hammerjs / hammer-time Goto Github PK
View Code? Open in Web Editor NEWA fast click based on the touch-action css property
License: MIT License
A fast click based on the touch-action css property
License: MIT License
import HammerTime from 'hammer-time'
and how to next?
I realize this is a proof-of-concept you wrote last night, but it looks awesome so far. (Figured it would be good to document this as a potential issue though)
http://stackoverflow.com/questions/28815845/mouseevent-not-working-in-internet-explorer
I have isolated a problem down to hammer-time on the stock Android browser. I mainly tested it on BrowserStack (HTC One M8 emulator) but can confirm it also happens on real HTC phones. Not sure if it affects the stock Android browser on other phones.
With just the below, tapping on the select box does not do anything. However, tapping on the space surrounding the select box triggers the native select dialog.
I'm not sure where to begin looking into this โ does anyone have any ideas?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Hammer Time</title>
<script src="hammer-time.js"></script>
</head>
<body>
<select style="touch-action: manipulation;">
<option value="1">One</option>
</select>
</body>
</html>
FYI The version with the undefined function hadTouchNone
is still the downloadable version on your website!
I downloaded hammer-time.min.js and when I run, I am getting an exception on my browser.
TypeError: this.hasTouchNone is not a function. (In 'this.hasTouchNone(a.target)', 'this.hasTouchNone' is undefined)
I downloaded the full Javascript (non-minified version) and it is working fine. When I checked the minified version code, the hasTouchNone function does not exist.
https://github.com/hammerjs/hammer-time/blob/master/hammer-time.js#L34-L42
Is this a detecting code for iOS8 and over ?
Why don't you change code using indexedDB?
http://caniuse.com/#search=indexedDB
Although iOS8,9 had a seriously bug, we can reduce code.
The polyfill relies on MutationObserver which isn't supported in several environments (like old IE). That's not a big deal since those environments don't typically have the 300ms delay, but we need to exit early if the MutationObserver isn't supported or else we'll get errors in those environments. For example:
Error thrown on this line. I do not see a pos variable inside that object, only a local one in that function.
At the time I can't find a way to require it via require()
and Webpack. Is there some special way to do it or it must be implemented into the library?
We ran into issues in our test when moving from fastclick to hammertime. It seems to me that PhantomJS 2.1.1 is returned as a touched device.
It looks like the issue is fixed but unreleased.
https://github.com/hammerjs/hammer-time/blob/master/hammer-time.js#L73-L79
https://github.com/hammerjs/hammer-time/blob/v1.0.0/hammer-time.js#L68-L70
This happens when the target of the touch events is a SVG element, e.g. a button/link that contains an SVG icon.
A JavaScript error occurs on e.target.click()
, as svg elements don't have that method.
I am running into issues where I am unable to scroll on some devices when dragging my finger on elements that are affected by touch-action:none;
I confirmed this wasn't an event-collision issue by testing this on the hammer-time index.html page: when placing touch-action:none;
on the body element, I am unable to scroll the page.
Confirmed Affected devices:
the focus method might be used unfocusable elements.
https://github.com/hammerjs/hammer-time/blob/master/hammer-time.js#L78
How about add conditional in code which uses HTMLElement.foucs method ?
I am not an experienced front end developer, so wanted to confirm that hammer-time is a replacement for fastclick.js.
I was confused b/c fastclick is almost 6 times bigger than hammer-time.
- var touchMatchNone = /touch-action[:][\s]*none[^;'"]*/;
+ var touchMatchNone = /touch-action[:][\s]*(none|manipulation)[^;'"]*/;
...again, I realize that you just hammered out this code a few hours ago, but figured it would be good to suggest improvements anyway!
To make sure we properly support ie10 we should probably check ms-touch-action
in addition to touch-action
and advice people to apply both to elements.
For browsers that don't support the touchstart
and touchend
events, those handlers are never fired. Thus, this.pos
never gets set and when the mouseup
event is triggered, errors are thrown, like these:
(browser support of touch events is currently mixed.)
Like #7, these are basically just desktop browsers that don't benefit from this plugin at all. I'm thinking the best way to handle this would be to bypass the hammer.time.install
if touch events aren't supported.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.