在 iPad 上 - raphael 元素 mouseover、mouseup、mouseout 事件不起作用答案

【问题标题】：On iPad - raphael elements mouseover, mouseup, mouseout events are not working在 iPad 上 - raphael 元素 mouseover、mouseup、mouseout 事件不起作用
【发布时间】：2014-11-17 19:32:04
【问题描述】：

我在 rapahel 元素上设置了 mouseover、mouseup、mouseout 事件，它监听 jquery 拖动（使用 jquery draggable 拖动的元素）。

this.elem.mouseover(this.handleMouseOver );
this.elem.mouseout( this.handleMouseOut );
this.elem.mouseup( this.handleMouseUpOver );

handleMouseOver : function(e) {
},
....

对于其他两个处理程序也是如此。

它在桌面浏览器上运行良好，尽管当我在 ipad/iphone 上的 raphael 元素上拖动文本时，上述事件似乎都没有启动。

是否有任何设置，或者需要添加自定义代码才能使其工作？

更新 - 我试图附加touchstart 和touchend 事件，但如果我处于拖动事件的中间，这些事件不会被解雇。

【问题讨论】：

想知道您是否需要 ipad 上的触摸事件？
我尝试绑定 touchstart 和 touchend，但是因为拖动事件已经在起作用，它没有在 raphael 元素上检测到它。
touchpunch.furf.com 将解决此问题
@AlvinK。我已经将它用于拖动元素，并且它在拖动非拉斐尔元素时工作正常。问题出在 raphael 元素上，它无法检测到其上的放置事件。我尝试在 raphael 元素上添加 touchstart、touchend，但它不起作用。

标签： svg raphael mouseover jquery-ui-draggable jquery-events

【解决方案1】：

好的，对于 Raphael，实现您自己的拖动：Element.drag(move, start, up)（参考：Element.drag）。原因是 jQuery UI 拖动事件在 Raphael DOM 中不稳定（根据我自己的经验）。

move = ... - 更新 Rapheal 元素 (x,y) 位置
start = ... - 勾勒出 Rapheal 元素（检查元素是否已经激活）
up = ... - 移除 Raphael 元素的轮廓（可选：分离监听器）

注意：IOS 触摸触发器 TWO mousedown()，因此 #2 检查以避免这种情况（不确定 IOS 8 是否也这样做）

【讨论】：

如果我理解正确，您建议对我正在拖动的元素使用 raphael 元素。目前它的 HTML 元素和我拖过 raphael 元素。假设我使用 raphael 元素将其拖放到另一个 raphael 元素上，我将如何检测在哪个元素上调用了 drop 事件。
拉斐尔也处理所有这些。引用：“...当元素被拖到另一个元素上时，drag.over.<id> 也会被触发”。