A javascript selector

来源：互联网发布：互联网金融大数据编辑：程序博客网时间：2024/04/30 04:58

This is a selector,but there is a problem that it will show an error when you click the body quickly in IE. it's done in FF.i will modifiy it at spare time. If you have some advice,please let me know.

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>^_^-Stefli's Selector</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#layer {
    position:absolute; 
    background:#efefef; 
    width:400px; 
    height:400px; 
    top:0p; 
    left:0px;
}
</style>
</head>
<body>
<div id="layer"></div>
<script type="text/javascript">
var drag;
function Class() {
    this.id = 1;
    this.x;
    this.y;
    this.obj;
    
    eval(this.obj + "=this");
    this.initial = function() {
        this.obj = document.createElement("DIV");
        $("layer").appendChild(this.obj);
        with(this.obj) {
            id = this.id;
            this.obj.style.position = "absolute";
            this.obj.style.border = "1px solid #00f";
            this.obj.style.lineHeight = "0px";
            this.obj.style.display = "none";
            thisthis.id = this.id + 1;
        }
    }
    this.move = function(x, y) {
        this.x = x;
        this.y = y;
        this.obj.style.left = x;
        this.obj.style.top = y;
    }
    this.draw = function(e) {
        this.obj.style.display = "";
        var px = (e.clientX - this.x)>0?this.x:e.clientX;
        var py = (e.clientY - this.y)>0?this.y:e.clientY;
        if(e.clientX==this.x) {
            this.obj.style.borderLeft = "0px";
        } else {
            this.obj.style.borderLeft = "1px solid #00f";
        }
        if(e.clientY==this.y) {
            this.obj.style.borderTop = "0px";
        } else {
            this.obj.style.borderTop = "1px solid #00f";
        }
        this.obj.style.left = px;
        this.obj.style.top = py;
        this.obj.style.width = Math.abs(e.clientX - this.x);
        this.obj.style.height =  Math.abs(e.clientY - this.y);
    }
    this.clear = function() {
        $("layer").removeChild(this.obj);
    }
    this.initial();
}
function setup(e) {
    drag = true;
    a = new Class();
    ee = e?e:window.event;
    a.move(e.clientX, e.clientY);
}
function draw(e) {
    ee = e?e:window.event;
    if(drag) {
        a.draw(e);
    }
}
function clear() {
    drag = false;
    a.clear();
}
function $(id) {
    return document.getElementById(id);
}
$("layer").onmousedown = setup;
$("layer").onmousemove = draw;
$("layer").onmouseup = clear;
</script>
</body>
</html>