Question

我在不使用canvas标签的情况下创建了一个相似的画布，通过每次鼠标按下时创建一个新的div，我不知道如何运行第二个事件。像mousedown一样，mousemove事件也只有在第一个事件为true之后才发生第二事件？另外，如果您可以提供偏移量坐标

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);

    }

Answer 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>

互相使用两个鼠标事件

1 个答案: