javascript - 多次单击元素后未触发鼠标事件

Question

我正在尝试检测元素上的开始/放下拖动事件。有时这些事件似乎不会被触发。来源在 JSFiddle 。尝试在橙色栏中按住鼠标并拖动以创建间隔(蓝色)。在 Chrome 中，尝试执行此操作 3 次。第三次，我几乎总是注意到，没有触发 mouseup 事件，这使得效果很奇怪。即使没有按下鼠标，拖动事件仍然会被触发

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)

似乎在 Firefox 和 IE10 中工作

Answer 1

问题是您需要使用 user-select 属性并将其设置为 none，这样 div 就无法被选中并且鼠标操作正常事件(这是通常对复杂的 UI 元素执行的操作)。

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.

我看到这个错误是因为 not-allowed 游标:

这是修正后的 JS fiddle :http://jsfiddle.net/r8Phv/7/

User-select 尚未在浏览器中实现，但 vendor 前缀适用于 Firefox2+、Chrome 6+、Opera 15 和 IE 10。

以下是用户选择的支持表:http://caniuse.com/user-select-none