zhyiwww
用平实的笔,记录编程路上的点点滴滴………
posts - 536,comments - 394,trackbacks - 0
/*********************************************************
 * @author             zhangyi
 * @email              zhyiwww@163.com
 * @date               2007-4-2
 *
 * 转载请注明出处 http://www.blogjava.net/zhyiwww
 * @凯发天生赢家一触即发官网 copyright          zhangyi
 *********************************************************/


这个功能,我花了好几天的时间才实现,主要是在拉框的时候,我可以实现,但是,我想在松开鼠标的时候,进行自己的业务处理,但是,怎么也不能响应鼠标的mouseup事件,也看了不少的例子,都是只有拉框,在移动事件里面可以实现功能,但是,鼠标的抬起事件不能响应。有的,可以相应事件,但是要鼠标在多点一下,后来就找了好多的资料,了解了事件的处理,才把这个问题搞定。
现在把代码重新整理了一下,希望对大家能有所帮助。


    
        
        拉框
    
    
        
            onmousedown='down(event)'
            onmouseup='up(event)'
            onmousemove='move(event)'
            style='top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue;'
        >            
            
                style='position:absolute;background-color: #ff99ff'            
            >            
        
    
    

        

    





|----------------------------------------------------------------------------------------|
                           凯发k8网页登录的版权声明  凯发k8网页登录的版权所有 @zhyiwww
            引用请注明来源 http://www.blogjava.net/zhyiwww   
|----------------------------------------------------------------------------------------|
posted on 2007-04-03 16:04 zhyiwww 阅读(6303) 评论(7)     所属分类: javascript

feedback:
# re: javascript鼠标拉框(框选)的实现
2007-04-03 16:18 | 山风小子
博主,您好!
您的程序我试过了,的确很棒!
但稍微有些不足之处,留待改进,当鼠标单击,双击时,那个粉红色的框框会突然出现。
希望您做的更好:)  回复  
  
# re: javascript鼠标拉框(框选)的实现
2007-04-03 18:17 | zhyiwww
@山风小子
因为在鼠标按下的时候就把层显示出来了。所以会有闪烁感。
你看上面上面的绿色的部分,就知道有什么不同了。
现在把 rect.style.visibility = 'visible';放在了鼠标move事件里面,也就是只要在鼠标移动事件处理的时候才会去把这一个层显示出来。就不会有问题了。
你可以试一下。  回复  
  
# re: javascript鼠标拉框(框选)的实现
2007-04-03 19:48 | cresposhi
路过,帮忙测试了一下,有点点小bug。当拉框鼠标超过容器(也就是相应鼠标事件的区域)后,再回到容器这个时候还是正常,但在容器里单击被拉的框位置就会跑到鼠标的右下方,显然就错位了,呵呵。

既然同样是jser,再多说两句,给哥们一个建议吧,这些对事件和页面坐标操作比较多的程序最好借助于prototype框架来写,如果你用prototype就不会发生你所说的花了几天时间,查了n多资料才搞定那两行蓝色的代码的事情了,因为prototype里面已经给做了,并且很完美,且兼容浏览器,如果你说想知道原理,需要从底层来编写,其实可以选择读prototype源码来的更快更好。并且代码也不会长到以致于我真的很难有耐性读完,不过我还是坚持了,支持每一个jser,呵呵。

呵呵 我话太多,不好意思占用楼主这么多地方,也不知道我形容清楚了没,如果有什么疑问可以来我博客交流,闪先!  回复  
  
# re: javascript鼠标拉框(框选)的实现
2007-04-03 21:46 | zhyiwww
谢谢您的建议。我觉得你的这个信息可能会对我有更大的帮助。
其实是因为我不知道,不是我不想用。我对javascript不是很熟悉,所以才会为了这个问题花了不少的时间,不过现在能自己通过找资料去独立的解决这个问题也觉得挺有成就感的。随着对js的深入,可能就能够接受更多的信息,可以使用更多的扩展。那么在实现功能上就可以更加灵活。  回复  
  
# re: javascript鼠标拉框(框选)的实现
2009-11-19 09:48 |
请问个问题啊!能不能让那个画出来的粉框在画选完之后还能在页面中显示啊?
  回复  
  
# re: javascript鼠标拉框(框选)的实现[未登录]
2012-02-16 00:40 |
试一下给document绑定mouseup事件,呵呵。  回复  
  
# re: javascript鼠标拉框(框选)的实现[未登录]
2013-04-24 10:16 |
能帮忙优化下吗?既然是框选,方框最好是半透明吧(不挡住后面的内容)。能综合上  回复  
  

只有注册用户后才能发表评论。


网站导航:
              
 
网站地图