js native I do not understand, you may write more garbage, we mainly want to solve the ban drag and bulk binding events, and generate page elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Title> Ega </ title>
</head>
<style>
#box{
float: left;
border: 1px solid black;
}
.cell{
background: pink;
width: 5px;
height: 5px;
float: left;
}
.cell_c{
clear:left;
}
</style>
<body>
<div id="box" onmouseup="end_hua()" onmousedown="start_hua()"></div>
<script>
let height = 100;
let width = 100;
let kaiguan = 0;
for(var i=0;i<height;i++){
for(var j=0;j<width;j++){
let d = document.createElement("div");
d.ondragstart = function () {return false;}; // Disable dragging
d.onmousemove = function(){hua(d)};
d.className = "cell";
if(j==0){
d.className = "cell cell_c";
}
document.getElementById("box").appendChild(d);
}
}
function start_hua(){
kaiguan = 1;
console.log ( "Start")
}
function end_hua(){
kaiguan = 0;
console.log ( "End")
}
function product (e) {
if (kaiguan == 1) {
e.style.backgroundColor="black"
}
// console.log()
}
</script>
</body>
</html>