javascript - Mouse events not triggered after several clicks on element -

i trying detect start/drop drags events on element. these events seem not triggered. source on jsfiddle. try holding down mouse in orange bar , dragging create intervals (in blue). in chrome, try 3 times. on 3rd time, notice always, mouseup event not triggered, making effect weird. when mouse not pressed, drag event still triggered

video on screenr

$ ->     ismousedown = false     isdragging = false     $draggedinterval = undefined     $test = $("#test")     $test         # code related attaching handlers 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 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 work in firefox , ie10

the issue need use user-select property , set none, div can't selected , behaves mouse events (this done complex ui elements).

http://www.w3.org/tr/2000/wd-css3-userint-20000216#user-select :

none: none of element's content can selected. very important value of user-select for user interface elements in particular. value 1 of aspects of how button behaves. the user cannot select of content inside button. if example, user uses pointing device click on element user-select: none, happens when pointing device button "down" addressed user-input property, whereas when pointing device button "released", property ensures no selection of contents of element may remain. way explain user-select: none gives button "push-button-springy" feel. value of 'none' useful static text labels in user interface not meant selected. example, in header of email message window, portion says "name:" cannot selected, whereas content following can be. such static text label have user-input: none.

i saw error because of not-allowed cursor:

here's corrected js-fiddle: http://jsfiddle.net/r8phv/7/

user-select not yet implemented in browsers, vendor-prefixes work firefox2+, chrome 6+, opera 15, , ie 10.

here support tables user-select: http://caniuse.com/user-select-none