AnthW
AnthW

Reputation: 543

HammerJS (v2) swipe and pan are disabling links being fired in iOS

I have a webpage with HammerJS on it. I am also using the angular directive from the hammerjs website.

I have swipe and pan on an element. But in doing this, it is stopping me clicking links or form elements in iOS only.

What's odd is that on the links, the CSS hover effect will occur, but the href isn't fired. Also on form elements, I cant select the text box to see a blinking cursor and keyboard.

Has anyone had similar issues or able to assist with what settings might be causing this?

The below code recognises the swiping, and fires the function, but disables the link firing.

<div data-hm-swipeup="doSwipeUp($event)" data-hm-swipedown="doSwipeDown($event)">
    <a href="/contact-us">Contact</a>
</div>

Upvotes: 0

Views: 1720

Answers (1)

rfornal
rfornal

Reputation: 5122

In the hammer settings, you want:

prevent_default: false

... this will allow you pass clicks through the container.

UPDATE:

It looks like the new version handles this a bit differently.

Try a few things ...

Reference: http://hammerjs.github.io/api/#hammer.defaults domEvents: false: Maybe set to true ...

Let Hammer also fire DOM events. This is a bit slower, so disabled by default. Recommended to set to true if you want to play with event delegation.

preset: [....]: Maybe remove tap ...

Default recognizer setup when calling Hammer(). When creating a new Manager these will be skipped.

By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking.

UPDATE 2:

It looks like this might be a means of handling these DOM events ...

$(element).hammer({domEvents:true}).on("tap", '.tap-object', function(event) {

... and effectively replace the native handling of the anchor.

Or, you can remove Hammer's recognition of the tap event which should allow the anchor's to function normally.

Upvotes: 1

Related Questions