鼠标按下和单击的区别

Question

我正在尝试从头开始创建一个自定义编辑器。为了移动光标，我有一个带有

click

处理程序的系统，它可以移动光标，然后聚焦我的

<input>

元素。但我目前正在实现选择系统，为此我必须将

click

事件处理程序更改为

mousedown

事件。但由于某种未知的原因，当我点击某个地方时，焦点不起作用。

单击处理程序，如果将“mousedown”更改为“click”，则一切正常

document.querySelector(".tab-editor").addEventListener("mousedown", (e) => {
    var rect = document.querySelector("#line-1").getBoundingClientRect();
    var x = e.x - rect.x; var y = e.y - rect.y;
    const line = Math.ceil(y / 20);
    writer.moveCursorTo(x, line);
}

writer.moveCursorTo()

if (line > this.lines.length){line = this.lines.length;}
        if (line < 1) {line = 1;}
        this.lines[this.currentline - 1].setCurrent(false);
        this.currentline = line;
        this.lines[this.currentline - 1].setCurrent(true);
        cursor.setPos(cursor.x, line * 20 - 20) // set y pos
        cursor.moveApproxX(x, this.lines[this.currentline - 1].text()); // set x pos

最后是cursor.setPos

this.cursor().style.left = x+"px";
this.cursor().style.top = y+"px";
this.input().style.left = x+"px";
this.input().style.top = y+"px";
this.x = x;
this.y = y;
this.input().focus();
this.resetBlink();

我检查了这两个事件，单击和鼠标按下事件中的 x 和 y 是相同的。 这是完整的代码：https://codepen.io/I-Hate-Login/pen/GRwaeBZ

Answer 1

它有效，但仅当按下鼠标按钮并且光标位于 .tab-editor-cursor 上时， 我建议将 mousedown 更改为 onmousedown 并在您想要书写的地方设置更广泛的范围