How to stop Hammer js events from firing from inner elements?

Question

I have found some answers to this issue, but didn't worked for me.

I'm using Hammer js for a slideshow. The slideshow items can contain images and links. I setted pointer-events: none on the images. But I cannot do it on links, obviously.

Can't find a way to let links to be cliecked but avoid hammer events on them. My current implementation is quite basic (code taken from a bigger class):

if(this.options.touch_enabled){
  this.hm = new Hammer(this.data_box, {
    recognizers: [
      [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }]
      ,[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }, ['swipe']]
    ]
    ,domEvents: true
  });

  this.hm.on('panleft', function(e){
    [...]
  }.bind(this));
  this.hm.on('panright', function(e){
    [...]
  }.bind(this));
}// touch

The pan events with fire within inner links instead of data_box (the container), so the script is not working because deltaX is based on the links instead of container.

Any solution? I tried domEvents: true and played a little with stopPropagation and preventDefault, but none worked.

Answer 1

A possible solution is simply to return false ondragstart:

$('#my_box a').on('dragstart', function(e){
  return false; // or, e.preventDefault();
});

This will prevent from bubbling, so the normal/intended panning will work, but you will still be able to click the links.

Probably you'll want to extend this behaviour to other elements too, such as images, but where possible, you can simply use the pointer-events: none; rule on them instead.

img{
   pointer-events: none;
}