【问题标题】:jQuery detect element under element being dragged on mouseenter/mouseleavejQuery检测元素下的元素被拖动到鼠标输入/鼠标离开
【发布时间】:2018-04-06 14:08:25
【问题描述】:

这里有点奇怪...我在 mouseenter 和 mouseleave 事件上都有事件侦听器,如下所示。

$(".dropContainer").on("mouseenter", dropContainerEnter);
$(".dropContainer").on("mouseleave", dropContainerLeave);

...但是它们似乎仅在光标移动到以速度附加的元素上时触发,并且两个事件似乎同时触发(或根本不触发)。 js 摆弄下面的问题演示(console.log on each eventfiring)。

https://jsfiddle.net/1b68eLdr/5341/

本质上,您将一个元素从左侧(测试 1/测试 2...)拖到右侧 div 中,我需要能够检测到鼠标相应地进入和离开。谁能告诉我如何解决它?

更新:所以我已经意识到发生这种情况的原因是因为我正在拖动一个元素并试图检测鼠标何时移动到一个 div 上,它只在光标快速移动时才起作用的原因是因为光标会短暂丢失它拖动的元素,因此可以检测到 div。

有没有办法让动态生成的元素(下面)“透明”,以便 mouseenter 事件检测到它下面的 div 和其他元素?

$(".dragAndDropContainer").append("<p class='clone'>" + $(target).text() + "</p>");

【问题讨论】:

  • jsfiddle.net/1b68eLdr/5364 这就是您要找的东西吗?看起来您只是将 mouseenter/mouseleave 设置错误且位置错误。
  • 几乎,我只希望它们在拖动元素时触发,因此 mouseDown 函数中的 mouseenter/mouseleave 设置和 mouseUp 函数中的侦听器删除。奇怪的是,我将您的更改移回了函数中,并且它工作了一次,无法让它再次工作......
  • 知道了!设置错误,然后不得不以不同的方式解除绑定。感谢您的帮助! jsfiddle.net/1b68eLdr/5373
  • 很高兴你成功了 :)
  • 以为我有,不完全...从好的方面来说,我知道问题出在哪里,只是不知道如何解决它。将很快更新问题

标签: jquery typescript


【解决方案1】:

想通了这个问题,我想如果有人遇到类似问题,我也可以发布答案。最初的问题是我在 div 上设置 mouseenter/leave 事件侦听器,并在拖动另一个元素时尝试检测该 div。

解决方案是将下面的 css 添加到被拖动的元素中,这是我迄今为止从未听说过的设置。

pointer-events: none;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-06
    • 2016-05-31
    相关资源
    最近更新 更多