Mouse events not triggered after several clicks on element

Question

I am trying to detect start/drop drags events on an element. Sometimes these events seem not to be triggered. The source is on JSFiddle. Try holding down mouse in the orange bar and dragging to create intervals (in blue). In Chrome, try do this for 3 times. On the 3rd time, I notice nearly always, the mouseup event is not triggered, making the effect weird. Even when the mouse is not pressed, the drag event is still triggered

Video on Screenr

$ ->
    isMouseDown = false
    isDragging = false
    $draggedInterval = undefined
    $test = $("#test")
    $test
        # code related to attaching handlers to trigger custom events
        .on "mousedown", ->
            isMouseDown = true
        .on "mouseup", (evt) -> 
            isMouseDown = false
            if isDragging
                $test.trigger("x-stopDrag", evt)
                isDragging = false
            else
                $test.trigger("x-click", evt)
        .on "mousemove", (evt) ->
            console.log isMouseDown, isDragging
            if isMouseDown && not isDragging
                $test.trigger("x-startDrag", evt)
                isDragging = true
            if isDragging
                $test.trigger("x-drag", evt)
        .on "mouseleave", (evt) ->
            isMouseDown = false
            if isDragging
                isDragging = false
                $test.trigger("x-cancelDrag", evt)
        # handlers for custom events
        .on "x-startDrag", (x, evt) -> 
            console.log("started dragging")
            $draggedInterval = $("<div>", {
                class: "interval"
                css: 
                    left: evt.clientX
            }).appendTo($test)
        .on "x-stopDrag", (x, evt) -> 
            console.log("stopped dragging")
            $draggedInterval = undefined
        .on "x-cancelDrag", -> 
            console.log("canceled dragging")
            $draggedInterval.remove()
            $draggedInterval = undefined
        .on "x-click", (x, evt) -> 
            console.log("click")
        .on "x-drag", (x, evt) ->
            console.log("drag")
            $draggedInterval.css("width", evt.clientX - $draggedInterval.position().left)

Appears to work in Firefox and IE10

Answer 1

The issue is that you need to use the user-select property and set it to none, so that the div can't be selected and behaves normally for mouse events (This is what is usually done for complex UI elements).

http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select :

none: None of the element's content can be selected. This is a very important value of user-select for user interface elements in particular. This value is one of the aspects of how a button behaves. The user cannot select any of the content inside the button. If for example, a user uses a pointing device to click on an element with user-select: none, what happens when the pointing device button is "down" is addressed by the user-input property, whereas when that pointing device button is "released", this property ensures that no selection of the contents of the element may remain. Another way to explain this is that user-select: none is what gives a button its "push-button-springy" feel. The value of 'none' is also useful for static text labels in a user interface which are not meant to be selected. For example, in the header of an email message window, the portion that says "Name:" cannot be selected, whereas the content following it can be. Such a static text label would also have user-input: none.

I saw this error because of the not-allowed cursor:

Here's a the corrected JS-fiddle: http://jsfiddle.net/r8Phv/7/

User-select is not yet implemented in browsers, but the vendor-prefixes work for Firefox2+, Chrome 6+, Opera 15, and IE 10.

Here are the support tables for user-select: http://caniuse.com/user-select-none