/*********************************************************
?* @author ??? ??? ??? zhangyi
?* @email? ??? ??? ??? zhyiwww@163.com
?* @date ??? ??? ??? ? 2007-4-2
?*
?* 轉載請注明出處 http://www.tkk7.com/zhyiwww
?* @copyright ??? ???? zhangyi
?*********************************************************/
這個功能，我花了好幾天的時間才實現，主要是在拉框的時候，我可以實現，但是，我想在松開鼠標的時候，進行自己的業務處理，但是，怎么也不能響應鼠標的mouseup事件，也看了不少的例子，都是只有拉框，在移動事件里面可以實現功能，但是，鼠標的抬起事件不能響應。有的，可以相應事件，但是要鼠標在多點一下，后來就找了好多的資料，了解了事件的處理，才把這個問題搞定。
現在把代碼重新整理了一下，希望對大家能有所幫助。
<html>
?? ?<head>
?? ??? ?<meta http-equiv="content-type" content="text/html; charset=gbk">
?? ??? ?<title>拉框</title>
?? ?</head>
?? ?<body>
?? ??? ?<div id='lay1'
?? ??? ??? ?onmousedown='down(event)'
?? ??? ??? ?onmouseup='up(event)'
?? ??? ??? ?onmousemove='move(event)'
?? ??? ??? ?style='top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue;'
?? ??? ?>?? ??? ??? ?
?? ??? ??? ?<div id='rect'
?? ??? ??? ??? ?style='position:absolute;background-color: #FF99FF'?? ??? ??? ?
?? ??? ??? ?>?? ??? ??? ?
?? ??? ?</div>?? ?
?? ?</div>
?? ??? ?<script language="javascript">
?? ??? ??? ?
?? ??? ??? ?// 是否需要(允許)處理鼠標的移動事件,默認識不處理
?? ??? ??? ?var select = false;
?? ??? ??? ?
?? ??? ??? ?var rect = document.getElementById("rect");
?? ??? ??? ?// 設置默認值,目的是隱藏圖層
?? ??? ??? ?rect.style.width = 0;
?? ??? ??? ?rect.style.height = 0;
?? ??? ??? ?rect.style.visibility = 'hidden';
?? ??? ??? ?//讓你要畫的圖層位于最上層
?? ??? ??? ?rect.style.zIndex = 1000;
?? ??? ??? ?
?? ??? ??? ?// 記錄鼠標按下時的坐標
?? ??? ??? ?var downX = 0;
?? ??? ??? ?var downY = 0;
?? ??? ??? ?// 記錄鼠標抬起時候的坐標
?? ??? ??? ?var mouseX2=downX;
?? ??? ??? ?var mouseY2=downY;
?? ??? ??? ?
?? ??? ??? ?//處理鼠標按下事件
?? ??? ??? ?function down(event){
?? ??? ??? ??? ?// 鼠標按下時才允許處理鼠標的移動事件
?? ??? ??? ??? ?select = true;
?? ??? ??? ??? ?//讓你要畫框的那個圖層顯示出來
?? ??? ??? ????
//rect.style.visibility = 'visible';?? ??? ??? ??? ?// 取得鼠標按下時的坐標位置
?? ??? ??? ??? ?downX = event.clientX;
?? ??? ??? ??? ?downY = event.clientY;
?? ??? ??? ??? ?
?? ??? ??? ??? ?//設置你要畫的矩形框的起點位置
?? ??? ??? ??? ?rect.style.left = downX;
?? ??? ??? ??? ?rect.style.top = downY;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//鼠標抬起事件
?? ??? ??? ?function up(event){
?? ??? ??? ??? ?//鼠標抬起,就不允許在處理鼠標移動事件
?? ??? ??? ??? ?select = false;
?? ??? ??? ??? ?//隱藏圖層
?? ??? ??? ??? ?rect.style.visibility = 'hidden';
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//鼠標移動事件,最主要的事件
?? ??? ??? ?function move(event){
?? ??? ??? ??? ?
?? ??? ??? ??? ?// 取得鼠標移動時的坐標位置
?? ??? ??? ??? ?mouseX2 = event.clientX;
?? ??? ??? ??? ?mouseY2 = event.clientY;
?? ??? ??? ??? ?
?? ??? ??? ??? ?// 設置拉框的大小?? ?
?? ??? ??? ??? ?rect.style.width = Math.abs( mouseX2 - downX );
?? ??? ??? ??? ?rect.style.height = Math.abs( mouseY2 - downY );?? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*
?? ??? ??? ??? ?
?? ??? ??? ??? ?這個部分,根據你鼠標按下的位置,和你拉框時鼠標松開的位置關系,可以把區域分為四個部分,根據四個部分的不同,
?? ??? ??? ??? ?我們可以分別來畫框,否則的話,就只能向一個方向畫框,也就是點的右下方畫框.
?? ??? ??? ??? ?
?? ??? ??? ??? ?*/
?? ??? ??? ??? ?if(select){
?? ??? ??? ??? ??? ?
??? ?? ??? ??? ????
rect.style.visibility = 'visible';
???
?? ??? ??? ??? ??? ?// A part
?? ??? ??? ??? ??? ?if( mouseX2 < downX && mouseY2 < downY ){
?? ??? ??? ??? ??? ??? ?rect.style.left = mouseX2;
?? ??? ??? ??? ??? ??? ?rect.style.top = mouseY2 ;?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// B part
?? ??? ??? ??? ??? ?if( mouseX2 > downX && mouseY2 < downY){
?? ??? ??? ??? ??? ??? ?rect.style.left = downX ;
?? ??? ??? ??? ??? ??? ?rect.style.top = mouseY2;?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// C part
?? ??? ??? ??? ??? ?if( mouseX2 < downX && mouseY2 > downY){
?? ??? ??? ??? ??? ??? ?rect.style.left = mouseX2;
?? ??? ??? ??? ??? ??? ?rect.style.top = downY ;?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// D part
?? ??? ??? ??? ??? ?if( mouseX2 > downX && mouseY2 > downY ){
?? ??? ??? ??? ??? ??? ?rect.style.left = downX ;
?? ??? ??? ??? ??? ??? ?rect.style.top = downY;
?? ??? ??? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?這兩句代碼是最重要的時候,沒有這兩句代碼,你的拉框,就只能拉框,在鼠標松開的時候,
?? ??? ??? ??? ??? ?拉框停止,但是不能相應鼠標的mouseup事件.那么你想做的處理就不能進行.
?? ??? ??? ??? ??? ?這兩句的作用是使當前的鼠標事件不在冒泡,也就是說,不向其父窗口傳遞,所以才可以相應鼠標抬起事件,
?? ??? ??? ??? ??? ?這個部分我也理解的不是特別的清楚,如果你需要的話,你可以查資料.但是這兩句話確實最核心的部分,
?? ??? ??? ??? ??? ?為了這兩句話,為了實現鼠標拉框,我搞了幾天的時間.
?? ??? ??? ??? ?*/
?? ??? ?? window.event.cancelBubble = true;
?? ??? ?? window.event.returnValue = false;?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?function getDivOffsetLeft(){
?? ??? ??? ??? ??? ?var lay1 = document.getElementById("lay1");
?? ??? ??? ??? ??? ?//var rect = document.getElementById("rect");
?? ??? ??? ??? ??? ?return lay1.offsetLeft;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?function getDivOffsetTop(){
?? ??? ??? ??? ??? ?var lay1 = document.getElementById("lay1");
?? ??? ??? ??? ??? ?//var rect = document.getElementById("rect");
?? ??? ??? ??? ??? ?return lay1.offsetTop;
?? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?</script>
?? ?</body>
</html>
|----------------------------------------------------------------------------------------|
版權聲明 版權所有 @zhyiwww
引用請注明來源 http://www.tkk7.com/zhyiwww
|----------------------------------------------------------------------------------------|
posted on 2007-04-03 16:04
zhyiwww 閱讀(6500)
評論(7) 編輯 收藏 所屬分類:
javascript