几次单击元素后未触发鼠标事件(Mouse events not triggered after several clicks on element)

几次单击元素后未触发鼠标事件(Mouse events not triggered after several clicks on element)

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

屏幕上的视频

$ -> 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

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

最满意答案

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

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

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

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

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

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

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

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