hammer.js

问题 Here is my code... just a simple test as I have never used hammer.js before: var hammerTime = new Hammer($('#hammerTarget').get(0)); hammerTime.add(new Hammer.Pinch({event: 'pinch'})); // Add pinch gesture events. hammerTime.on('pinchin', function(event) { console.log('hammer pinchin'); }).on('pinchout', function(event) { console.log('hammer pinchout'); }).on('pinchend', function(event) { console.log('hammer pinchend'); }); This works fine, I can detect the pinch, but now on my pinch target I

问题 I'm playing around with hammer.js for a web app. I can get it to work just fine, except on content loaded with ajax. I use the hammer.js special-events plugin for jquery. The following works fine: $('#menu a').on("tap", function(event) { //console.log(event); }); But when I use the jquery delegation syntax: $('body').on("tap", '#menu a', function(event) { //console.log(event); }); Nothing happens... What is the right syntax? 回答1: Try this if you dynamically add the a element : $('#menu').on(

问题 How would I do jQuery-style event delegation with plain JavaScript in Hammer.js? E.g.: Hammer(document).on('tap', '.item', function () { console.log('tapped') }) Is this directly possible or do I have to do the delegation myself? 回答1: You simply need to inspect the target of the Event object that's passed into your handler. Here's a demo. 回答2: Inspired by Jools' answer, here is what I've come up with. I didn't bother with a pure-JS solution--in fact, this is intended for use with a Backbone

问题 How can I detect the scale (or distance pinched) of the pinch to zoom when the meta name="viewport" is set to user-scalable=yes ? I've tested on Android but the pinch to zoom can't be detected if the meta name="viewport" is set to user-scalable=yes . If the meta name="viewport" is set to user-scalable=no then the pinch to zoom can be detected but then I'm not able to zoom in on the document. Here are my tests on jsFiddle: Hammer.js: http://jsfiddle.net/pE42S/ var pziW = "test"; var viewport

问题 I'm working on a small side project using the Hammer JS library and I've ran into a problem on Chrome Dev Tools emulator and while debugging on two iOS 7 devices. It seems to work fine on desktop browsers. Fiddle here: http://jsfiddle.net/w80baz5g/5/ and more info below. I've a group of elements, like this: <div> <img class="item" id="item0" src="http://placehold.it/300x300"> <img class="item" id="item1" src="http://placehold.it/300x300"> <img class="item" id="item2" src="http://placehold.it

问题 I'm developing an app for Chrome on a Microsoft Surface Pro 2 running Windows 8.1. Recently, the Chromium team decided they wanted to add the pinch-to-zoom gesture in Chrome for Windows 8, which is all and good. They did not, however, add a flag to disable this behavior in Chrome's settings for those few of us that don't want pinch-to-zoom functionality. Now I'm left trying to disable the browser's default behavior by other means. The first thing I tried was to add this meta-tag: <meta name=

问题 I'm developing an web app. On the left side is an sidebar using the Sidr-plugin (jQuery Plugin: Sidr). The test site is on my developing server. My problem is that if I'm swipe from left-to-right the sidebar is displayed. That's very good. But if I want to close the sidebar by swiping from right-to-left I must prevent the scrolling by add this following code: $('body').bind('touchmove', function(e){e.preventDefault()}) I did that, but now: My navigation in the top of the page (menu) doesn't

问题 I try to add hammer js to my reactjs component and my component looks as it follows import React from 'react'; import _ from 'underscore'; import Hammer from 'hammerjs'; class Slider extends React.Component { constructor(props) { super(props) this.updatePosition = this.updatePosition.bind(this); this.next = this.next.bind(this); this.prev = this.prev.bind(this); this.state = { images: [], slidesLength: null, currentPosition: 0, slideTransform: 0, interval: null }; } next() { console.log(

问题 I'm using jquery.hammer.js, it works quite well and I am able to bind function to a doubletap event. That is working fine. What I want is to bind two different behaviors. One for the "tap", one for the "doubletap". I use the code below to bind my functions. When I do that, I only get the "tap", the "doubletap" doesn't seem to be triggered. $("#W0AM").hammer(); $("#W0AM").on('doubletap', function (event) { alert( 'this was a double tap' ); }).on('tap', function (event) { alert( 'this was a

问题 I am trying to build a web application that has true multi touch capabilities. For example, I want to be able to drag a container around the screen while also zooming/panning on a google map at the same time. The problem that I am having is that if I am touching somewhere else on the page (not on the map) and then I touch on the map with another finger, the map acts as if both fingers were touching the map. This results in trying to pan on the google map with one finger turning into zooming