Question

全部

我尝试构建如下的调整器用户界面：

我的代码如下：

           <span class="grabber" draggable="false" @mousedown="grab"></span>

            grab: function(e) {
                var initX = e.screenX;

                var mousemove = function(e) {
                    var offset = e.screenX - initX
                    initX = e.screenX;
                }
                var cancel = function(e) {
                    $(document).off("mousemove")
                    $(document).off("mouseup")
                }
                $(document).on("mousemove", mousemove)
                $(document).on("mouseup", cancel)
                mousemove = null;
                cancel = null;
            }

基本思想是：我将grab事件处理程序附加到mousedown，在其中听鼠标移动直到mouseup，然后从文档中删除这两个事件处理程序。

我对Chrome Performance工具还很陌生，因此我只记录了该调整大小的一些拖动，然后将鼠标向上拖动并再次拖动。

结果令人困惑，尤其是侦听器的数量疯狂增加（但似乎没有内存泄漏）。我想知道我在哪里做错了？

Answer 1

那么这是怎么回事：

<span class="grabber" draggable="false" @mousedown="grab"></span>

每次按下鼠标时，vue运行grab

在这种情况下，最安全的做法是将事件直接附加到e.target，还将cancel函数中的处理函数设置为null。

 grab: function(e) {
                var initX = e.screenX;
                var target = e.target;

                var mousemove = function(e) {
                    var offset = e.screenX - initX
                    initX = e.screenX;
                }
                var cancel = function(e) {
                    $(target).off("mousemove")
                    $(target).off("mouseup")
                    mousemove = null;
                    cancel = null;
                }
                $(target).on("mousemove", mousemove)
                $(target).on("mouseup", cancel)

            }

Answer 2

使用标志变量，而不是添加和删除处理程序。

var mouseIsDown = false;
$(document).on("mousedown", function() {
    mouseIsDown = true;
});
$(document).on("mouseup", function() {
    mouseIsDown = false;
})
$(document).on("mousemove", function() {
    if (mouseIsDown) {
        // do what you want
    }
});

mousedown处理程序可以附加到您可以抓取的特定元素上，而不是document。

为什么手动删除后事件监听器仍然存在

2 个答案: