一个接一个地使用两个鼠标事件答案

【问题标题】：Using two mouse events after each other一个接一个地使用两个鼠标事件
【发布时间】：2019-05-31 10:11:02
【问题描述】：

我正在创建一个类似的画布而不使用画布标签，每次鼠标按下时创建新的 div，我无法弄清楚如何运行第二个事件。像 mousedown 然后 mousemove 事件，其中第二个事件仅在第一个事件为真之后发生？如果你可以帮助偏移坐标

var paintbox = document.getElementById("canvas");
var start = function() {
    paintbox.addEventListener("mousedown", drawOnCanvas);
};
var newColor = document.getElementById("colorPick");
var drawOnCanvas = function() {
        var newClick = document.createElement("div");
        newClick.setAttribute("id", "smallDiv");
        newClick.style.backgroundColor = newColor.value;
        newClick.style.width = "10px";
        newClick.style.height = "10px";
        newClick.style.position = "absolute";
        paintbox.appendChild(newClick);

    }

【问题讨论】：

在 mousedown 处理函数（以及 mouseup 监听器）中附加 mousemove 事件，并在 mouseup 事件处理函数中将其移除。
不清楚要达到什么目的？单击时绘制框？拖动时绘制多个框？在两次点击之间画线？
要么绑定 mousedown /mouseup 事件，要么使用promise
当我单击鼠标时，我创建了一个带背景的小 div 并将其附加到主 div 这就是我所达到的。现在我要做的是在鼠标按下之后并且在移动它的同时不断创建 div 的

标签： javascript

【解决方案1】：

在mousemove 事件而不是mousedown 上设置处理程序，并在处理程序中检查鼠标按钮是否按下。

在 CSS 类中移动 10px/位置样式设置会更好。另外，不要生成具有相同 id 属性值的元素：这会生成无效的 HTML。请改用class。

对于定位，您可以使用事件对象的pageX 和pageY 属性。

最后，当您进行小动作时，事件将在小 div 上触发，因此可能需要进行额外检查以验证鼠标是否仍在绘图框中。

var paintbox = document.getElementById("canvas");
var start = function() {
    paintbox.addEventListener("mousemove", drawOnCanvas);
};
var newColor = document.getElementById("colorPick");

var drawOnCanvas = function(e) {
    if ((e.buttons & 1) === 0) return; // Mouse button is not down
    // Extra check to see we are well within the box boundaries:
    var box = paintbox.getBoundingClientRect();
    if (e.clientX - 5 < box.left || e.clientX + 5 > box.right 
         || e.clientY - 5 < box.top || e.clientY + 5 > box.bottom) return;
    var newClick = document.createElement("div");
    newClick.className = "smallDiv"; // Don't create duplicate ID; put CSS in class
    newClick.style.backgroundColor = newColor.value;
    paintbox.appendChild(newClick);
    newClick.style.left = (e.pageX-5) + "px";
    newClick.style.top = (e.pageY-5) + "px";
}

start();

#canvas {
    height: 150px;
    width: 300px;
    border: 1px solid;
    display: inline-block;
    margin: 10px;
}
.smallDiv {
    width: 10px;
    height: 10px;
    position: absolute;
}

Color: <input id="colorPick" type="color"><br>
<div id="canvas"></div>

【讨论】：