Hammer.js: User selection

[anselmh]

Hey there,

thanks for developing the framework. I just have a question that might already have been answered. If so, please let me know and excuse me.

Hammer.js currently serves this -webkit-user-select: none on the body tag and also the touch-derivate. Is this necessary and why is it?
The problem is (as all of you can imagine) that user cannot select text anymore which for me is a real blocker issue. Can I somehow prevent this behavior?

Thanks for clarification!
-Anselm

[jtangelder]

the css_hacks option disables the css properties, but it may cause problems when dragging, holding. the user-select property disables the browser functionality, like you noticed :-)

[dcalhoun]

If anyone stumbles upon this issue now, as I have, this option has been renamed to "stop_browser_behavior". You can disable this behavior by setting the option to false.

[kimblim]

I can't get this to work — I've done this:

var hammertimetap = Hammer(content, {
stop_browser_behavior: false,
}).on("tap", function(event) {
dosomething();
}
})

where "content" is a reference to a div-element. It sort-of works, although I can still not select text.

Any ideas on where I'm going wrong?

Thanx.

[dcalhoun]

@kimblim I haven't tested this, but it looks like the option may have been renamed (again). You may need to do something like the following:

Hammer(content, {
  behavior: {
    userSelect: true
  }
});

You can read more about the option in the source.

[kimblim]

Aaaah, didn't see that — thanx a lot, that works!

[Bargs]

If anybody stumbles across this issue like I did, note the the option name has changed again. It's now called cssProps instead of behavior, so your config would look like this:

Hammer(content, {
  cssProps: {
    userSelect: true
  }
});

[jpatel3]

Its very weird, even if cssProps is blank it enables userSelect. Am I missing anything?

Hammer(content, {
  cssProps: {
  }
});

[tjvg91]

delete Hammer.defaults.cssProps.userSelect;

place this before the initialization of your hammer object

[musterknabe]

@jpatel3 It only overwrites specified cssProps, so an empty cssProp will result in the defaults being used.

This worked for me:

cssProps: {
    userSelect: 'auto',
 }

@Bargs You should probably set it to something of auto | text | none | contain | all (See https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)

[tsarma]

In case someone is still having/want to overcome this issue. The following excerpt is from hammerjs tips section. And it works too.

If you care about the text-selection and not so much about the desktop experience, you can simply remove this option from the defaults. Make sure you do this before creating an instance.

delete Hammer.defaults.cssProps.userSelect;

Or
You can just reset the BODY inline css user-select : text, with javascript in your favourite domready function.