jQuery UI Selectable - mouseup is not triggered

I have a list of items, to click drag and select I have used jQuery UI Selectable. The selection part is working smooth but I have delegated "mousedown" and "mouseup" events to the list of items, but the "mouseup" event is not triggered when I include jquery-ui.css file.

HTML

<div id="favoritelist">
    <span>This is favorite list</span>
    <ol id="selectable">
        <li class="ui-widget-content">Item 1</li>
        <li class="ui-widget-content">Item 2</li>
        <li class="ui-widget-content">Item 3</li>
        <li class="ui-widget-content">Item 4</li>
        <li class="ui-widget-content">Item 5</li>
        <li class="ui-widget-content">Item 6</li>
        <li class="ui-widget-content">Item 7</li>
    </ol>
</div>

$('#favoritelist').on("mouseup", function(){
    console.log('in favoritelist mouseup');
});

$('#favoritelist').on("mousedown", function(){
    console.log('in favoritelist mousedown');
});

$( "#selectable" ).selectable();

I have included the following files:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

The mouseup event is not triggered when I include "jquery-ui.css" file. But when I remove the "jquery-ui.css" file the mouseup event is triggered properly and the selection is also working as expected.

I am confused why mouseup event is not propagating when I include the jquery-ui.css file.

JSBIN LINK

Solution

This issue/behavior has been discussed both here on SO and in the jQuery forums & issue tracker - it boils down to the fact that there is a helper DIV that gets injected to display the visual "lasso" a user would see if click-and-dragging around the selectable items. This lasso DIV sits between the mouse & the selectable element and thus interferes with the mouseup event.

All links referenced suggest two options:

Use the optional distance initialization parameter on the selectable widget, OR
Use the following CSS override: .ui-selectable-helper{pointer-events:none}

I find the latter to be more reliable, though the former is the technically preferred route.