Question

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

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：

无：无法选择元素的内容。这是非常用户的重要值 - 选择用于用户界面元素 特定。此值是按钮行为方式之一。 用户无法选择按钮内的任何内容。如果是的话例如，用户使用指点设备点击元素 user-select：none，指针设备按钮发生时会发生什么 “down”由用户输入属性解决，而在此时指向设备按钮是“已发布”，此属性确保没有可以保留元素内容的选择。另一种方式解释这是用户选择：none是什么给它一个按钮 “按钮弹性”的感觉。 'none'的值也很有用用户界面中的静态文本标签，并非如此选择。例如，在电子邮件消息窗口的标题中，部分表示“名称：”无法选择，而内容则无法选择跟着它可以。这样的静态文本标签也会有 user-input：none。

由于不允许游标，我看到了此错误： not-allowed cursor

这是一个纠正过的JS小提琴：http://jsfiddle.net/r8Phv/7/

浏览器尚未实现

用户选择，但供应商前缀适用于Firefox2 +，Chrome 6 +，Opera 15和IE 10。

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

几次点击元素后未触发鼠标事件

1 个答案: