javascript - Ember : How to get mouse event in a view that's not the target

Question

我有一个 Ember.js 应用程序，其中的 View 使用鼠标事件(向下、移动和向上)来允许用户通过在按住时单击和拖动来调整元素大小。工作起来就像一个魅力 - 直到鼠标指针离开 View 的边界。然后我没有任何迹象表明鼠标发生了什么。

要了解我想要实现的目标，请考虑“画图”中的编辑 View - 单击并拖动以创建一个矩形。如果您经过 View 的顶部，矩形的高度将停止变化，但宽度会根据鼠标当前位置而变化。

即使目标现在是另一个 View ，我也想继续获取鼠标移动的更新。我怎样才能以干净的方式实现它 - 而不修改其余 View ？

理想情况下，我想做的是在 mouseLeave 中运行一段代码，修改 Ember 的全局事件监听器委托(delegate)事件的方式 - 以便即使它不是目标，它们也会传递到我的 View 。当然 - 当释放鼠标按钮时我需要清除它。

Answer 1

然后，通常您必须在 document 上注册事件处理程序，并过滤出 target 以匹配您的 View 。

使用 jQuery 的示例:

var mouseDown = false;
$(document).on("mousedown", function(e){
    // If we target the view element, we can start capture events
    var $target = $(e.target);
    if ($target.closest("#yourViewElement").length !== 0 || $target.is("#yourViewElement")) {
        mouseDown = true;
    }
});
$(document).on("mouseup", function(e){
    mouseDown = false;
});
$(document).on("mousemove", function(e){
    // We initially clicked on the view, so we listen for the changes now
    if (mouseDown) {
        // Parse events here, e.pageX / e.pageY etc.
    }
});