event.clientX鼠标移动到div上取不到值

Question

我现在有一个操作是对一个div进行缩放操作，我在要进行缩放的这个div上面再加了一个遮罩div（半透明的），当在鼠标移动的时候对遮罩div进行缩放，当在鼠标在mouseup的时候再对下面要缩放的div进行缩放操作。现在就是有一个问题，当我在缩放遮罩div的时候，每当鼠标移动到要缩放的那个div上的时候就取不到event.clientX的值，比如说，我拉住左边框的时候，往左拉边框可以取到event.clientX，但是当我往右拉的时候鼠标到了要缩放的那个div上时就取不到event.clientX的值了。  真是想不通event因该是全局的啊，，为什么在div上就取不到了。各位有过类似经验的能否给我说说到底是什么原因，无论于否我都会根据情部给分的。

Answer 1

event是"全局"的,但是响应这个event的事件源如果不明的话还是无法调用event的,比如说:移动你知道是谁移动了么? 必须是XXX移动,才能对XXX进行定位

Answer 2

遮罩div<div id="dragmoive"  style="cursor:crosshair;display:none;z-index:999;background-color: #cccccc;position: absolute;background-image: none;filter: alpha(opacity:50);-moz-opacity:0.5;opacity:0.5;"></div> 
创建缩放的div//--------------------------------创建div程序
 var DialogBox = Class.create();
  DialogBox.prototype = {
 initialize: function (containerid,borderid,imgid,flashid){
 this.containerId=containerid; //最外层的容器层
 this.borderId=borderid;   //边框层
 this.imgId=imgid; //缩放边框的层
 this.flashId=flashid; //生成flash图表的层
     this.containerDiv;  //容器层
 this.borderDiv; 
 this.createFrameDiv();
 },
 createFrameDiv: function (){
var doc=document;
this.containerDiv=doc.createElement("DIV");
this.containerDiv.id=this.containerId;
this.containerDiv.zIndex=10; //设置z-index控制窗口层叠位置，后打开的窗口在上层
this.containerDiv.className="worp"
 
this.containerDiv.style.left=400;
this.containerDiv.style.top=200;
        this.createBorderDiv(); //生成边框
 
    doc.body.appendChild(this.containerDiv);  //注册到页面中
        //添加右键菜单  
$("#"+this.containerId).contextMenu({
menu: 'ChartMenu'
},
function(action, el, pos) {

if(action=="deleteChart"){
    deleteObject($(el).attr('id'));
}else if(action=="ChartStyle"){
    changeChartStyle($(el).attr('id'));
}else if(action=="ChartData"){

}else if(action=="ChartOption"){

}
 });
       // alert(this.containerDiv.childNodes[0].id);
 
 },
     createBorderDiv: function(){ //边框层
var winborder;
winborder= "<div id="+this.borderId+" class=\"cont\">" 
+"<div class=\"tl\">"
+ "<div class=\"ml\">"
+ "<div class=\"bl\">"
+ "<div class=\"tm\">"
+ "<div class=\"bm\">"
+ "<div class=\"tr\">"
+ "<div class=\"mr\">"
        + "<div id=\""+this.imgId+"\" class=\"br\">"
+ "</div> </div> </div> </div> </div> </div> </div> </div> </div>"
+"<div class=\"mainCont\" >"
+"<div style=\"z-index:12;cursor:move\" id="+this.flashId+"> </div>"
+"<input type=\"hidden\" name="+this.containerId+" value=\"hello\">"
+"</div>";

this.containerDiv.innerHTML=winborder;  } 
  
 };

Answer 3

缩放操作//-----------------------------------------------------------------------------------------缩放程序
var Resize = Class.create();
Resize.prototype = {
//缩放对象
initialize: function(obj,bord,img) {
this.img = j$(img);  //边框
this.bord = j$(bord); //缩放边框 
this._obj = j$(obj);//缩放对象
this.move=j$("dragmoive"); //移动矩形框 //this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//样式参数
//this._styleTopHeight= this._styleLeftWidth=0; //定位参数
this._right = this._down = this._left = this._up = 0;//坐标参数
//this._scaleX = this._scaleY=0;
this._scale = 1;//比例参数
this._touch = null;//当前触发对象
//
var _style = CurrentStyle(this._obj);
this._xBorder = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0);
this._yBorder = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0);
//事件对象(用于移除事件)
this._fR = BindAsEventListener(this, this.Resize);
this._fS = Bind(this, this.Stop);
//用于在边框移动光标
this._mR = BindAsEventListener(this, this.mMouse);
    this._mS = BindAsEventListener(this, this.mStop);
   //缩放大小的最小限
this.Min=true;
this.minWidth = 150;
this.minHeight = 150;
this._obj.style.position = "absolute"; //改变光标类型触发对象
addEventHandler(this.bord, "mousemove", BindAsEventListener(this, function(e){
this._touch = this.bord; this.mStart(e);
}));
//缩放触发对象
addEventHandler(this.bord, "mousedown", BindAsEventListener(this, function(e){
this._touch = this.bord; this.Start(e);
}));
},
//边框上的光标移动
mStart: function(e){
addEventHandler(document, "mousemove", this._mR);
    if(isIE){
    addEventHandler(this._touch, "losecapture", this._mS);
}else{
    addEventHandler(window, "blur", this._mS);
}
//阻止默认动作
e.preventDefault();
},
//改变移动鼠标样式
mMouse: function(e){
//改变移动的鼠标样式
 el = this.bord;
if (el.className == "cont") {
this.strm = this.getDirection(e,el);
//还原光标 
if (this.strm == "") this.strm = "default";
else this.strm += "-resize";
el.style.cursor = this.strm;
}
 },
 mStop:function(){
 //移除事件
removeEventHandler(document, "mousemove", this._mR);
   if(isIE){
removeEventHandler(this._touch, "losecapture", this._mS);
this._touch.releaseCapture();
}else{
removeEventHandler(window, "blur", this._mS);
}
 
 },
//准备缩放
Start: function(e) {
//防止冒泡
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
//计算样式初始值
/////////////////////
//样式参数值
this._styleWidth = this._obj.offsetWidth;
this._styleHeight = this._obj.offsetHeight;
this._styleLeft = this._obj.offsetLeft;
this._styleTop = this._obj.offsetTop;
//top和left定位参数
this._styleLeftWidth = this._styleWidth + this._styleLeft;
this._styleTopHeight = this._styleHeight + this._styleTop;
//计算当前边的对应另一条边的坐标 例如右边缩放时需要左边界坐标
this._left = e.clientX - this._styleWidth;
this._right = e.clientX + this._styleWidth;
this._up = e.clientY - this._styleHeight;
this._down = e.clientY + this._styleHeight;
    //初始化遮罩层
this.move.style.left=this._obj.style.left;
    this.move.style.top = this._obj.style.top;
this.move.style.display="block"; //mousemove时缩放 mouseup时停止
addEventHandler(document, "mousemove", this._fR);
addEventHandler(document, "mouseup", this._fS);
if(isIE){
//焦点丢失
addEventHandler(this._touch, "losecapture", this._fS);
//设置鼠标捕获
this._touch.setCapture();
}else{
//焦点丢失
addEventHandler(window, "blur", this._fS);
//阻止默认动作
e.preventDefault();
};
},
//缩放
Resize: function(e) {
// alert("resize");
var resize = this.bord, _fun; //清除选择
//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//执行缩放程序
this._e = e;
//根据方向设置 _fun是缩放时执行的程序
switch (this.strm) {
case "n-resize" : //上
this.RepairY(this._down - this._e.clientY, this._mxTopHeight);
this.RepairTop();
break;
case "s-resize" : //下
this.RepairY(this._e.clientY - this._up, this._mxDownHeight);
break;
case "w-resize" : //左
this.RepairX(this._right - this._e.clientX, this._mxLeftWidth);
this.RepairLeft();
break;
case "e-resize" :  //右
this.RepairX(this._e.clientX - this._left, this._mxRightWidth);
break;
case "nw-resize" : //左上
this.RepairAngle(
this._right - this._e.clientX, this._mxLeftWidth,
this._down - this._e.clientY, this._mxTopHeight
);
this.RepairTop(); this.RepairLeft();
break;
case "ne-resize" : //右上
this.RepairAngle(
this._e.clientX - this._left, this._mxRightWidth,
this._down - this._e.clientY, this._mxTopHeight
);
this._styleTop = this._styleTopHeight - this._styleHeight;
break;
case "sw-resize" : //左下
this.RepairAngle(
this._right - this._e.clientX, this._mxLeftWidth,
this._e.clientY - this._up, this._mxDownHeight
);
this.RepairLeft();
break;
case "se-resize" : //右下
default :
this.RepairAngle(
this._e.clientX - this._left, this._mxRightWidth,
this._e.clientY - this._up, this._mxDownHeight
);
};
//  alert(this._styleLeft + "px"+this._styleTop + "px"+this._styleHeight + "px"+this._styleWidth + "px");
//j$("aa").innerHTML="this._styleWidth:"+this._styleWidth+"this._styleHeight:"+this._styleHeight +"e._styleLeft:"+ this._styleLeft+"<br>";
//设置样式    因为计算用的offset是把边框算进去的所以要减去   宽度设置必须大于等于0否则ie出错

    this.move.style.left=this._obj.style.left;
    this.move.style.top = this._obj.style.top; this.move.style.width = this._styleWidth + "px";
this.move.style.height = this._styleHeight + "px";
this.move.style.top = this._styleTop + "px";
this.move.style.left = this._styleLeft + "px";
    this.move.style.cursor='crosshair';
 },
//////////////////////////////
 //水平方向
RepairX: function(iWidth,mxWidth) {
iWidth = this.RepairWidth(iWidth, mxWidth);
this._styleWidth = iWidth;
},
//垂直方向
RepairY: function(iHeight,mxHeight) {
iHeight = this.RepairHeight(iHeight, mxHeight);
this._styleHeight = iHeight;
},
/////////////////////////
 RepairTop: function() { //上
 this._styleTop = this._styleTopHeight  - this._styleHeight;
 },
 RepairLeft: function() {//左
    this._styleLeft = this._styleLeftWidth - this._styleWidth;
// j$("aa").innerHTML="this._styleWidth:"+this._styleWidth+"this._styleLeft:"+this._styleLeft +"e._styleLeftWidth:"+ this._styleLeftWidth+"<br>";
 },
 RepairHeight: function(iHeight, mxHeight) { //高
iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0);
return iHeight;
 },
 RepairWidth: function(iWidth, mxWidth) { //宽
iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0);
return iWidth;
 },
///////////////////////////////
//对角方向
RepairAngle: function(iWidth,mxWidth,iHeight,mxHeight) {
iWidth = this.RepairWidth(iWidth, mxWidth);
this._styleWidth = iWidth;
this._styleHeight = iHeight;
},
 //同步边框和图片的大小
onResizeContent: function(){
this._obj.style.width = this._styleWidth + "px";
this._obj.style.height = this._styleHeight + "px";
this._obj.style.top = this._styleTop + "px";
this._obj.style.left = this._styleLeft + "px";    //更改flash大小
   // j$("chartflashcoent0").style.width   =   parseInt(this._obj.style.width)-20+"px";
   // j$("chartflashcoent0").style.height   =  parseInt(this._obj.style.height)-20+"px";
           
   //同步图片
  // this.img.style.width = parseInt(this._obj.style.width)-20;
  // this.img.style.height = parseInt(this._obj.style.height)-20;
  //alert(parseInt(this._obj.style.width)-20);
  //j$("chart1Id").style.width   =   parseInt(this._obj.style.width)-20+"px";  
 //  j$("chart1Id").style.height   =  parseInt(this._obj.style.height)-20+"px";
  //  j$("chart1Id").style.zoom  =   100+"%"; 
   //同步边框
   this.bord.style.width = this._obj.style.width;
   this.bord.style.height = this._obj.style.height;
   this.img.style.width = this._obj.style.width;
   this.img.style.height = this._obj.style.height;
   this.move.style.display="none"; 
},
 //取得是怎样类型的缩放 
getDirection: function (e,el) {
var xPos, yPos, offset, dir;
    dir = "";
e=e?e:window.event      
    xPos=e.clientX-this._obj.offsetLeft;
    yPos=e.clientY-this._obj.offsetTop;
offset = 10; //The distance from the edge in pixels
if (yPos<offset) dir += "n";
else if (yPos > el.offsetHeight-offset) dir += "s";
if (xPos<offset) dir += "w";
else if (xPos > el.offsetWidth-offset) dir += "e";
return dir; //光标的所有类型 (n, s, e, w, ne, nw, se, sw)
 },
////////////////////////////////////////////////
//停止缩放
Stop: function() { //同步边框和图片
this.onResizeContent(); //移除事件
removeEventHandler(document, "mousemove", this._fR);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this._touch, "losecapture", this._fS);
this._touch.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
 
}
};

Answer 4

看了下代码,不是找不到event.clientx的值,是你移到缩放对象上以后的事件源发生了改变,你拉右边框的时候事件源移动到了缩放对象上.所以找不到