Propagation Issue In Nested Jquery Ui Selectable

Question

Problem is: In nested jQuery Ui selectable, selecting top most child of context means when I click on Item 1 it select Item 1, but when I click on Item 111 or 1111 it select

Answer 1

Use the distance option.

The distance means tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.

With e.g. distance: 10 (10 pixels), the element below will have a fair chance to receive the click.