下面是事件部分:
let schCompModel = undefined;//存储选择的器件
let schCompModelCopy = undefined;//存储的拷贝
let schState = {//元器件元素的状态 原始状态0,被放置的状态1,移动状态2
none: 0,
placing: 1,
moving: 2,
};//statement structure 状态的结构体
let schCurrent = schState.none;//元器件的当前状态
let schPrevX = 0;
let schPrevY = 0;//存储最后位置的鼠标坐标
let keyList = undefined;//key值列表
//let comp = undefined;
用按钮和组件绑定事件:
因为ev是事件的参数啊!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。
所以好多事件函数都是这样写:
mydiv.onclick = function(ev){
if(!ev){ev = window.event;} //这句也可以简写成:ev=window.event||ev;
alert(ev.pageX+","+ev.pageY);
}
mousedown([[data],fn])
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
data:mousedown([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的mousedown事件中绑定的处理函数。
splice() 方法用于插入、删除或替换数组的元素
注意:这种方法会改变原始数组!。
array.splice(index,howmany,item1,…..,itemX)
index 必需。规定从何处添加/删除元素。
该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 “0”。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素
//这个js片段是我在用raphael画图的时候动态的确定鼠标的坐标时用到的。
//适用场景:当你想动态的获取鼠标当前坐标时
<script type="text/javascript">
window.onload=function(){
var mydiv = document.createElement("div");
mydiv.setAttribute("id","hint");
mydiv.style.position="absolute";
mydiv.style.lineHeight="10px";
mydiv.style.width="40px";
mydiv.style.borderStyle="solid";
mydiv.style.borderColor="#000000";
mydiv.style.borderWidth="1px";
mydiv.style.height="20px";
mydiv.style.display="none";
document.body.appendChild(mydiv);
document.addEventListener("mousemove",function(e){
var myhint = document.getElementById("hint");
myhint.style.display= "block";
myhint.style.left= e.clientX+"px";
myhint.style.top= e.clientY+"px";
myhint.innerHTML="x坐标:"+e.clientX+",y坐标: "+e.clientY;
});
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var flag = false;
var tc = document.createElement("canvas");
tc.width = canvas.width;
tc.height = canvas.height;
var tctx = tc.getContext("2d");
var x = 0;
var y = 0;
canvas.onmousedown = function (e) {
e = e || window.event;
x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
y = e.clientY - canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop);
flag = true;
tctx.drawImage(canvas,0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
if (!flag) return;
e = e || window.event;
var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
var gy = e.clientY - canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(tc,0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(gx,gy);
ctx.stroke();
}
canvas.onmouseup = function (e) {
flag = false;