1

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

筛选器上的视频

$ ->
    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 中使用

4

1 回答 1

4

问题是您需要使用该user-select属性并将其设置为none，以便无法选择 div 并在鼠标事件中正常运行（这通常用于复杂的 UI 元素）。

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

none：不能选择元素的任何内容。这是用户选择的一个非常重要的值尤其是对于用户界面元素。该值是按钮行为方式的一个方面。 用户无法选择按钮内的任何内容. 例如，如果用户使用定点设备单击带有 user-select: none 的元素，则当定点设备按钮为“向下”时会发生什么由用户输入属性解决，而当该定点设备按钮为“释放”，此属性确保不会保留元素内容的选择。解释这一点的另一种方法是 user-select: none 赋予按钮“按钮弹性”的感觉。'none' 的值对于用户界面中的静态文本标签也很有用，这些标签不应该被选中。例如，在电子邮件消息窗口的标题中，不能选择“姓名：”部分，而后面的内容可以。这样的静态文本标签也会有用户输入：无。

由于不允许的游标，我看到了这个错误：不允许的游标

这是一个更正的 JS-fiddle：http: //jsfiddle.net/r8Phv/7/

用户选择尚未在浏览器中实现，但供应商前缀适用于 Firefox2+、Chrome 6+、Opera 15 和 IE 10。

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

于 2013-07-11T09:01:48.193 回答