点击滑动条的时候无法捕获mouseup事件，又是IE的bug？

200分居然都没有人感兴趣，算了自己搞定。<HTML>
<BODY>
<TEXTAREA NAME="" ROWS="5" style="width:500" onmousedown="down()" onmouseup="out.innerHTML='up'">
    问 题 用户名 分数 回复 时间 功能 
    【调查】关于 Web 标准，你的看法，你的学习需求     风云舞：FlashVml(璀灿之星)4.0发布 
    在javascript中用command模式模拟多线程     【梅花雪网页脚本控件集】MzTreeView 1.0 一次加载数据... 
？ 动态添加，修改，删除下拉框中的元素  vc8850 20 14 07-29 11: 29 管理  
？ 最后10分请教大家一个撑开表格的问题！  dj0628 10 0 07-29 11: 28 管理  
？ 如何在拖动层的时候避免页面出现滚动条以及一些东西被选中而页面变形  william61 20 1 07-29 11: 21 管理  
？ 请问一个关于读Response.Cookies("name1")("name2")的问题  clinfo 50 3 07-29 11: 16 管理  
？ 如何避免浮动广告被MyIE屏蔽？  shuangren 20 2 07-29 11: 07 管理  
？ 你们碰到这样的问题了吗?  liminlovemama 20 2 07-29 11: 05 管理  
？ 在关闭窗口的时候怎么样弹出一个新窗体，上面显示确定、取消按钮  buyitianzi 20 3 07-29 11: 02 管理  
？ url传参数问题  king5281273 10 0 07-29 10: 56 管理  
？ 对数据处理，往表格添加的问题。  lj0103 100 0 07-29 10: 50 管理  
？ 高分请教：怎样向window.open打开的新window中加入一段脚本  liuyan4794 100 9 07-29 10: 37 管理  
？ js语句执行顺序问题  shenjf2000 50 9 07-29 10: 33 管理  
？ 在一个页面里面我想放一张图片，让他向浮动的图片一样来回走动，这个代码应该怎么写?  ddddddddzj 20 3 07-29 09: 36 管理 ？ 请教如何将当前页面的表格导出为Excel格式（本地操作）  
 </TEXTAREA>
<BR><BR>
<div style="border:1px solid black;width:500;height:100;overflow:scroll" onmousedown="down()" onmouseup="out.innerHTML='up'">
    问 题 用户名 分数 回复 时间 功能 <br>    【调查】关于 Web 标准，你的看法，你的学习需求     风云舞：FlashVml(璀灿之星)4.0发布 <br>    在javascript中用command模式模拟多线程     【梅花雪网页脚本控件集】MzTreeView 1.0 一次加载数据... <br>？ 动态添加，修改，删除下拉框中的元素  vc8850 20 14 07-29 11: 29 管理  <br>？ 最后10分请教大家一个撑开表格的问题！  dj0628 10 0 07-29 11: 28 管理  <br>？ 如何在拖动层的时候避免页面出现滚动条以及一些东西被选中而页面变形  william61 20 1 07-29 11: 21 管理  <br>？ 请问一个关于读Response.Cookies("name1")("name2")的问题  clinfo 50 3 07-29 11: 16 管理  <br>？ 如何避免浮动广告被MyIE屏蔽？  shuangren 20 2 07-29 11: 07 管理  <br>？ 你们碰到这样的问题了吗?  liminlovemama 20 2 07-29 11: 05 管理  <br>？ 在关闭窗口的时候怎么样弹出一个新窗体，上面显示确定、取消按钮  buyitianzi 20 3 07-29 11: 02 管理  <br>？ url传参数问题  king5281273 10 0 07-29 10: 56 管理  <br>？ 对数据处理，往表格添加的问题。  lj0103 100 0 07-29 10: 50 管理  <br>？ 高分请教：怎样向window.open打开的新window中加入一段脚本  liuyan4794 100 9 07-29 10: 37 管理  <br>？ js语句执行顺序问题  shenjf2000 50 9 07-29 10: 33 管理  <br>？ 在一个页面里面我想放一张图片，让他向浮动的图片一样来回走动，这个代码应该怎么写?  ddddddddzj 20 3 07-29 09: 36 管理 ？ 请教如何将当前页面的表格导出为Excel格式（本地操作）
</div>
<div id=out style="color:red;font-size:30">ready</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function down(){
var elm = event.srcElement;
if ((event.x-elm.offsetLeft-parseInt(elm.currentStyle.borderWidth))-1>elm.clientWidth) return
if ((event.y-elm.offsetTop-parseInt(elm.currentStyle.borderWidth))-1>elm.clientHeight) return
out.innerHTML='down';
}
//-->
</SCRIPT>
</BODY>
</HTML>

解决方案 »

  1.   

    是说用function down()函数解决了问题。
    不过function down()函数也有问题：
    elm.currentStyle.borderWidth有的时候值不是1px之类的具体值，函数会出错，所以我在事件使用的时候干脆直接了写具体的数值,类似这样：
    event.x-elm.offsetLeft-3>elm.clientWidth
    此外如果滚动条光现实而没有允许滚动的清新下是可以捕获到mouseup事件的，所以我实际要多做一个判断：
    ((elm.clientHeight<elm.scrollHeight)&&(event.x-elm.offsetLeft-3>elm.clientWidth))
      

  2.   

    >>此外如果滚动条光现实而没有允许滚动的清新下是可以捕获到mouseup事件的
    -->>此外如果滚动条光显示而没有允许滚动的情形下是可以捕获到mouseup事件的
      

  3.   

    这个可能是在滚动条显示的情况下，div本身就产生了滚动条的控件，并在在控件上边定义了mousedown的事件，通过这个事件先获得鼠标点击的位置，在决定划块移动到的位置。正因为这个mousedown的时间，也就屏蔽了用户的鼠标事件！但是只限于滚动条的区域。但是： emu_ston(祝福后山) 你改动后的代码，我试了一下，怎么点击滑动条的时候还是没有反映呢？
      

  4.   

    <HTML>
    <BODY onload="window.setInterval('out.innerHTML=111',500);">
    <TEXTAREA NAME="" ROWS="5" style="width:500" onmousedown="out.innerHTML='down'" onmouseup="out.innerHTML='up'" cols="20">
    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k
    l</TEXTAREA>
    <BR><BR>
    <div style="border:1px solid black;width:500;height:100;overflow:scroll" onmousedown="out.innerHTML='down'" onmouseup="out.innerHTML='up'">
    a<br>
    b<br>
    c<br>
    d<br>
    e<br>
    f<br>
    g<br>
    h<br>
    i<br>
    j<br>
    k<br>
    l
    </div>
    <div id=out style="color:red;font-size:30">ready</div>除了“此外如果滚动条光显示而没有允许滚动的情形下是可以捕获到mouseup事件的”之外，   
    还有一些情形值得关注：1.对于右键的mousedown和mouseup却可以成功捕捉
    2.textarea的文字区域，左键mousedown后，事实上有一个类似于setCapture效果，所以就算在其它的地方mouseup，也当作是在textarea对象上mouseup。另外，楼主称为“自己搞定”的处理方式，似乎是为了能让mousedown和mouseup能配对，
    如果真的是这个意图的话，应该对事情没什么帮助，因为mousedown和mouseup本身就不配对，如果不加setcapture，实在很难做到这种配对的效果。
    </BODY>
    </HTML>
      

  5.   

    andymu077(明治佐玛戒--秀曼) ：因为滚动调区域反正都捕获不到mouseup事件，所以干脆放弃了mousedown的捕获，所以没有“反应“了。JK_10000(JK) ：你没看到我前面说的“在做一个页面拖放功能的时候发现这个问题的”？页面拖放的时候当然要让mousedown和mouseup配对啊，不然页面控件就移植跟着鼠标跑了。
    在拖放控件的时候是不大会发生“在其他地方mouseup”的，除非拖到窗口外边去了，那是另一个问题了。
    右键可以捕获我也发现了，可是不能作为解决方案。
      

  6.   

    如果是为了mousedown和mouseup配对，用setCapture()和releaseCapture()就要简单得多。http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htm
      

  7.   

    JK你还是不明白发生了什么事啊？关键是IE的bug造成了在scrollbar上面根本不触发mouseup事件，即使setCapture了也还是不触发，除非在textarea外面再包一个div并且让divsetCapture，可是这样textarea又无法滚动了。
      

  8.   

    还是看个实际点的例子吧：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <BODY>
    <TEXTAREA NAME="" ROWS="5" style="width:100;position:absolute;" onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this)>
        问 题 用户名 分数 回复 时间 功能 
        【调查】关于 Web 标准，你的看法，你的学习需求     风云舞：FlashVml(璀灿之星)4.0发布 
        在javascript中用command模式模拟多线程     【梅花雪网页脚本控件集】MzTreeView 1.0 一次加载数据... 
    ？ 动态添加，修改，删除下拉框中的元素  vc8850 20 14 07-29 11: 29 管理  
    ？ 最后10分请教大家一个撑开表格的问题！  dj0628 10 0 07-29 11: 28 管理  
    ？ 如何在拖动层的时候避免页面出现滚动条以及一些东西被选中而页面变形  william61 20 1 07-29 11: 21 管理  
    ？ 请问一个关于读Response.Cookies("name1")("name2")的问题  clinfo 50 3 07-29 11: 16 管理  
    ？ 如何避免浮动广告被MyIE屏蔽？  shuangren 20 2 07-29 11: 07 管理  
    ？ 你们碰到这样的问题了吗?  liminlovemama 20 2 07-29 11: 05 管理  
    ？ 在关闭窗口的时候怎么样弹出一个新窗体，上面显示确定、取消按钮  buyitianzi 20 3 07-29 11: 02 管理  
    ？ url传参数问题  king5281273 10 0 07-29 10: 56 管理  
    ？ 对数据处理，往表格添加的问题。  lj0103 100 0 07-29 10: 50 管理  
    ？ 高分请教：怎样向window.open打开的新window中加入一段脚本  liuyan4794 100 9 07-29 10: 37 管理  
    ？ js语句执行顺序问题  shenjf2000 50 9 07-29 10: 33 管理  
    ？ 在一个页面里面我想放一张图片，让他向浮动的图片一样来回走动，这个代码应该怎么写?  ddddddddzj 20 3 07-29 09: 36 管理 ？ 请教如何将当前页面的表格导出为Excel格式（本地操作）  
     </TEXTAREA>
     <SCRIPT LANGUAGE="JavaScript">
     <!--
    var beginMoving=false;
    function MouseDownToRemove(obj){
    // if((obj.clientHeight<obj.scrollHeight)&&(event.x-obj.offsetLeft-3>obj.clientWidth))return
    obj.mouseDownX=event.x;
    obj.mouseDownY=event.y;
    obj.srcX = obj.offsetLeft;
    obj.srcY = obj.offsetTop;
    obj.moving=true;
    // obj.setCapture();
    }
    function MouseMoveToRemove(obj){
    if(!obj.moving) return false;
    obj.style.left = obj.srcX+event.x-obj.mouseDownX;
    obj.style.top = obj.srcY+event.y-obj.mouseDownY;;
    }
    function MouseUpToRemove(obj){
    // obj.releaseCapture();
    obj.moving=false;
    }
    //-->
     </SCRIPT>
    </BODY>
    </HTML>
    如果鼠标左键点在textarea的scrollbar上面，textarea就会一直跟着鼠标走，只有点击右键可以释放。
    注意被注释掉的三行，第一行是：if((obj.clientHeight<obj.scrollHeight)&&(event.x-obj.offsetLeft-3>obj.clientWidth))return 。去掉注释后问题解决，这是我的方法。
    后面注释掉的两行是setCapture，在这个例子中是否加进去都不影响程序运行，也无法产生“配对”的mouseup事件。
      

  9.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <BODY onmouseup="MouseUpToRemove();">
    <TEXTAREA NAME="" ROWS="5" style="width:100;position:absolute;" onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) >
    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k
    l
    </TEXTAREA>
     
     <SCRIPT LANGUAGE="JavaScript">           
     <!--
    var beginMoving=false;
    var currentObj=document.createElement("td");
    function MouseDownToRemove(obj){
    // if((obj.clientHeight<obj.scrollHeight)&&(event.x-obj.offsetLeft-3>obj.clientWidth))return
    currentObj=obj;
    obj.mouseDownX=event.x;
    obj.mouseDownY=event.y;
    obj.srcX = obj.offsetLeft;
    obj.srcY = obj.offsetTop;
    obj.moving=true;
    obj.setCapture();
    }
    function MouseMoveToRemove(obj){
    if(!obj.moving) return false;
    if(event.button!=1) return false;//加了这一句
    obj.style.left = obj.srcX+event.x-obj.mouseDownX;
    obj.style.top = obj.srcY+event.y-obj.mouseDownY;
    }function MouseUpToRemove() //这一个函数改为body的onmouseup调用
    {
    currentObj.releaseCapture();
    currentObj.moving=false;
    }
    //-->
     </SCRIPT>
    </BODY>
    </HTML>
      

  10.   

    var currentObj=document.createElement("td");是没用的吧？
    var currentObj;if(event.button!=1) return false;//加了这一句
    这个比较有意思，原来拖着scrollbar滚动的时候button居然是0来的，你怎么发现的？这样做比我去算坐标要准确的多了。
      

  11.   

    var currentObj=document.createElement("td");是没用的吧？
    ---这一句有用，如果不预设初始值，在mouseuptoremove里面就得判断字是否为空。scrollbar滚动的时候button居然是0
    ---对ie逆来顺受惯了，左右乱碰运气好就在早上碰上了。
      

  12.   

    真是强强对决，我也可以从中获得些余利!"scrollbar滚动的时候button居然是0"真的是头次发现