hammerjs / hammer-time

A fast click based on the touch-action css property
MIT License
100 stars 29 forks source link

Fails when clicking on SVG graphics #22

Open eirikurn opened 8 years ago

eirikurn commented 8 years ago

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.

eirikurn commented 8 years ago

A workaround is set pointer-events: none; on the svg element.

arschmitz commented 8 years ago

Hrm im not sure if we should actually do something here or just document this

eirikurn commented 8 years ago

Yeah, only "fix" I can think of now is:

var node = e.target;
while (node && !node.click) {
  node = node.parentNode;
}
if (node) node.click();
arschmitz commented 8 years ago

@eirikurn pretty much but the css solution is a lot nicer but far less automatic

wongpeiyi commented 8 years ago

Am facing this on android browsers – however I'm thinking the dropHammer function should just be wrapped in a check for target.click. This way the default functionality is preserved should hammer-time not be able to fire:

  dropHammer: function( e ) {
    if ( e.target.click ) {
      if ( e.type === "touchend") {
        e.target.focus();

        // Wait for next tic so events fire in proper order
        setTimeout( function() {
          e.target.click();
        }, 0 );
      }

      // Prevent the click which will come after this otherwise but with a 300ms delay
      e.preventDefault();
    }
  },

I think this is preferable than making assumptions about clicking through to the parent?

mydea commented 8 years ago

I am also experiencing this on an iPad. The pointer-events: none thing fixed it, but I also feel that this shouldn't break, but just fall back to 'regular' behavior in that case.