Javascript解决方案:
function resizableStart(e){
this.originalW = this.clientWidth;
this.originalH = this.clientHeight;
this.onmousemove = resizableCheck;
this.onmouseup = this.onmouSEOut = resizableEnd;
}
function resizableCheck(e){
if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {
this.originalX = e.clientX;
this.originalY = e.clientY;
this.onmousemove = resizableMove;
}
}
function resizableMove(e){
var newW = this.originalW + e.clientX - this.originalX,
newH = this.originalH + e.clientY - this.originalY;
if(newW < this.originalW){
this.style.width = newW + 'px';
}
if(newH < this.originalH){
this.style.height = newH + 'px';
}
}
function resizableEnd(){
this.onmousemove = this.onmouSEOut = this.onmouseup = null;
}
var els = document.getElementsByClassName('resizable');
for(var i=0, len=els.length; i<len; ++i){
els[i].onmouSEOver = resizableStart;
}
上面的解决方案使用mouSEOver和mouSEOut触发resizableStart和resizableEnd。问题是,如果要调整大小的元素具有子元素,则将鼠标放在子元素上时,该元素会收到一个mouSEOut事件,并且紧随其后,它会收到一个mouserover从子元素冒泡的事件。