CODEWITHSUNDEEP
htmlcssreactjsusability
Eric Soyke
Eric Soyke

Reputation: 1067

How to allow a mouse click close to an element?

Long ago at a conference talk on React I saw the presenter add something to his code that allowed you to click-drag a divider on the screen by getting to within a certain number of pixels of it, rather than have click exactly on it.

It's a handy concept for improving usability, though I don't know what it is called. Adding 'slop' perhaps? Anyway I completely forget how he did it, presumably using some padding approach. Does anyone know what this practice is called and how to implement it? I assume it was something he achieved it with CSS but am not sure.

Upvotes: 0

Views: 44

Answers (1)

Dupocas
Dupocas

Reputation: 21297

You can use vanilla js to do that. Using element.getBoundingClientRect() to retrieve the element's offset relative to body and comparing with the actual mouseX and mouseY(in the click moment of course) you now know the distance between the element and the click, now add some logic like: Case distance < acceptable offset then do some side effect.

Upvotes: 1

Related Questions