现在的位置: 首页 > web前端 > 正文

javascript js 拖拽效果releaseCapture

2020年07月15日 web前端 ⁄ 共 1084字 ⁄ 字号 评论关闭

  最近在搞VML的东东。做了一个简单的在HTML页面上画出流程图的功能。既然是画图,就肯定遇到在页面上拖动图画元素的功能。这个大家都会觉得很简单了,无非就是mousedown,mousemove,mouseup这些事件的组合了。但是如果只是这么简单的编写代码的话,当页面上元素都有自己的mousedown,mousemove,mouseup时,在拖动的时候就会受到干扰。根据原来开发VB程序的经验,我觉得应该有一种方式能够将事件暂时锁定到一个对象。翻翻资料,看到了两个方法:setCapture和releaseCapture,哈哈,和Win32API的函数名称都一样。


  releasecapture怎么样


  setCapture函数的作用就是将后续的mouse事件都发送给这个对象,releaseCapture就是将鼠标事件还回去,由document、window、object之类的自行来处理,这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰。另外,还有一个很重要的事情是,在Win32上,mousemove的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发生一个mousemove,windows会周期性检查mouse的位置变化来产生mousemove的事件。所以,如果是一个很小的页面对象,比如一个直径5px的圆点,如果没有setCapture和releaseCapture,那么在鼠标按住之后,快速的移动鼠标,就有可能鼠标移动走了,但是小圆点还在原地,就是因为下一次的mousemove事件已经不再发给这个圆点对象了。


  releasecapture代码


  简单的代码如下(WindowsXPSP2+IE6测试):


  <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">


  <html>


  <head>


  <metahttp-equiv="content-type"content="text/html;charset=windows-1250">


  <metaname="generator"content="PSPadeditor,www.pspad.com">


  <title>HTMLMouseDragMove</title>


  <scriptlanguage="javascript">


  //全局变量,记录鼠标指针的上一次位置


  varg_x;


  varg_y;


  总之,releasecapture给大家简单的介绍了一些,希望大家多看看。


  

抱歉!评论已关闭.