Question

我有一个元素想要显示调整大小的句柄。我当前的代码：

const cursorMove = (e) => {
    if (!curData.doAnimate) {

        mouse.x = e.clientX;
        mouse.y = e.clientY;

        resize = {
            top: mouse.y < curPos.y + settings.resizeMargin,
            right: mouse.x > curPos.x + curPos.w - settings.resizeMargin,
            bottom: mouse.y > curPos.y + curPos.h - settings.resizeMargin,
            left: mouse.x < curPos.x + settings.resizeMargin,
        };
        const {top, right, bottom, left} = resize;

        if (top || left || right || bottom) {
            // mouse over border

            if ((top && left) || (bottom && right)) {
                wrap.style.cursor = 'nwse-resize';
            } else if ((top && right) || (bottom && left)) {
                wrap.style.cursor = 'nesw-resize';
            } else if (top || bottom) {
                wrap.style.cursor = 'ns-resize';
            } else if (left || right) {
                wrap.style.cursor = 'ew-resize';
            }
        } else {
            wrap.style.cursor = 'default';
        }
    }
};

wrap.addEventListener('mousemove', cursorMove);

如您所见，我使用JavaScript为鼠标移动添加了一个事件监听器，每次鼠标移动时，我都会检查天气是否在元素的边框上。如果使用curData.doAnimate对节点执行某些操作，则可以关闭事件监听器。如果我移出该元素，则可以删除eventlistener，但我认为这样做不会提高性能。

理想的解决方案是使用Css的解决方案，或者是没有事件侦听器永久监听移动事件的解决方案。

预先感谢您：）

编辑：我只对更改后的光标感兴趣-我已经有一个调整节点大小的功能（除非您知道使用某种魔术的超级光滑方法）。

Answer 1

幸运的是，CSS已经具有处理此问题的属性：resize

向节点添加调整大小的句柄

1 个答案: