Comments (11)
I'm not sure what you mean. propagating-hammerjs
is distributed via NPM, but NPM does not mean the library is restricted to server side code or something, it's just a (great!) package manager.
propagating-hammerjs
uses UMD, so you can load it directly in the browser, using require.js or using commonjs + browserify. Did you try the examples? They show how to load the file propagating.js
.
from propagating-hammerjs.
@josdejong thanks. Part of my issue is do to (most probably due my lack of knowledge) Meteor. I am using a Meteorhacks NPM package to install the package... but as I understand it, this will only work on the Meteor server.
So as an alternative, I did try and bypass using NPM and just placing propagating.js
into my client directory, which basically ends up with something equivalent to <script src="../propagating.js"></script>
as per the examples. This is where I got the propagating is not defined
error generated on the propagating.js
file.
from propagating-hammerjs.
I'm not familiar with Meteor, but I suppose you can just download and host your own "assets" separately of the Meteor ecosystem.
I suppose the file <script src="../propagating.js">
is loaded correctly and has no fetching errors.
propagating-hammerjs
exposes the propagating
function to window
when it detects it's not running inside an AMD environment (define.amd
exists) or in a CommonJS environment (exports
exists). I'm just guessing here, but maybe Meteor exposes any of these (define.amd
or exports
), and if so, propagating-hammerjs
configures itself for that environment.
If that's the case, it may help to load the <script src="../propagating.js">
script before any meteor scripts. And else, you probably have to retrieve the module via the module system of Meteor, using a require
call or something.
from propagating-hammerjs.
Thanks.
Ok, I am know loading thethe JS files in the following order
<script type="text/javascript" src="/client/views/helpers/a_loadbefore/hammer.js?4aaab178e607ad12fce1490a5b9c38b72daa6b9a"></script>
<script type="text/javascript" src="/client/views/helpers/a_loadbefore/jquery.hammer.js?f9949f3ffce2eab65e671ed76e8c94c6dbb80b86"></script>
<script type="text/javascript" src="/client/views/helpers/a_loadbefore/propagating.js?f5a5a8a8c5862329c4494071cc19d053f4688a4e"></script>
<
followed by:
<script type="text/javascript" src="/client/views/helpers/hammer2.js?90e6abd5bceebe51c03dc1932831d51f3025611e"></script>
All hammer2.js has in it is: Hammer = propagating(Hammer);
as per example: https://github.com/josdejong/propagating-hammerjs/blob/master/examples/global.html
I see the following errors in the console:
from propagating-hammerjs.
Ah, that's an interesting first error in the console. Looks like the propagating.js script has no top level this
(which should resolve to window
when used in the browser). I've removed that from the code and released v1.2.1
, maybe that solves this issue.
from propagating-hammerjs.
Wow, thanks for the quick turnaround.. that sorted it out.
Now, I still have a propagation issue... when I press in a div, I want to highlight it... but it seems to propagate up the tree. I have tried both stopImmediatePropagation
and stopPropagation
as per:
My markup is similar to:
<div id="58bd5c48632c1ac6d63365ed" class="some-class">
<div id="cba2a40e17ff6a263519255d" class="some-class"> somehting</div>
</div>
my code looks something like:
$('.some-class.editable').hammer({domEvents: true}).bind("press", function(e, target){
// console.log(e)
e.stopPropagation();
e.preventDefault();
$('.some-class.editable.active').removeClass('active');
console.log($(this)[0].id)
//$(this).addClass('hover');
//$(e.target).addClass('active');
$(this).addClass('active');
});
if I click the child (id=cba2a40e17ff6a263519255d) the console shows me multiple ID's of the children and the parent:
As I am using jQuery and before installing your code I got no complaints about call e.PreventDefault() or stopPropagation. Do I need to change the order of inclusion to have propagation.js
load before the jquery.hammer.js
and do the override before that?
from propagating-hammerjs.
Ok great that that solved the initial issue.
It does not matter in which order you load propagating.js
. But I don't see you actually using propagating
in your code, you create regular hammer instances it seems.
from propagating-hammerjs.
I was trying to use the global override approach: All hammer2.js has in it is: Hammer = propagating(Hammer);
from propagating-hammerjs.
hm then I'm not sure whether you actually created instances of propagating-hammerjs
or not. It sounds like you do, because there is a method event.stopPropagation
available (you could also check for event.firstTarget
and event._handled
, which are added to events by propagating-hammerjs
too).
Back to the ordering thing:
Do I need to change the order of inclusion to have propagation.js load before the jquery.hammer.js and do the override before that?
Looking at the code of jquery.hammer.js I see it creates a local reference to Hammer
. So in that case it actually does matter in which order the libraries are loaded: your hammer2.js
script should be loaded before jquery.hammer.js
, as it replaces the global Hammer
.
Are you sure that both child element and parent element use a propagating hammer instance? Only then this solution can work.
from propagating-hammerjs.
Yea!!! That did it. Thanks!!!
I renamed the files so they get loaded in the correct order:
Meteor loads them alphabetically.
My only concern is the my "press" function seems to be called twice:
That said, it has not propagated to the parent. Is there some reason that I'd get 2 calls?
from propagating-hammerjs.
Ok that's great :)
I tested whether a press
event is fired twice in a bare bones propagating-hammerjs
example, that is not the case. I'm afraid you will have to do some more debugging to figure out where this comes from. If this is related to propagating-hammerjs
feel free to open another issue for that.
from propagating-hammerjs.
Related Issues (11)
- panmove is not work when swipe first time in device of android HOT 1
- angular 6/7 HOT 1
- export also as ESM module HOT 2
- Way to emit events in test code that is compatible with propagating-hammerjs HOT 4
- Doesn't work when using the jquery.hammer plugin HOT 4
- Performance of Vertical Scroll is less in android chrome using propagating.js HOT 1
- Use apply() in stopPropagation wrapper HOT 3
- Propagation is not stopped for dynamically added items HOT 2
- Multitouch does not work HOT 4
- needs domEvents:true? but this causes issues HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from propagating-hammerjs.