resizable和draggable组件在IE8下浏览器越界无法释放对目标DOM控制的问题

标签： draggable resizable window draggable越界 resizable越界 | 发表时间：2013-06-04 15:08 | 作者：世纪之光
出处：http://www.easyui.info

标题有点长， 不考虑IE8兼容性的朋友可以直接忽视本文，本文所提到的问题是只在IE8这个垃圾版本下才会有的问题。大家在使用window组件的时候，应该注意到在IE8下，当resize或者拖动window超出浏览器边界的时候，被resize或者拖动的window组件实例依旧处于被reszie或者被拖动的状态，即便是松开鼠标也没有用。其实归根到底是mouseup事件没有被触发。这个并不是EasyUI才有的问题，很多类似框架，如DWZ，DHTMLX都存在这个问题。

如何解决这个问题，本人也一直没有想出太好的方案，不过IE浏览器有个setCapture方法可以被利用，这个方法并不是w3c标准里面的，不同浏览器可能有不同实现，它的用途就是设置事件可以被触发的范围，如果调用了某个DOM对象的setCapture方法，则这个DOM对象的绑定事件即便是在鼠标超出浏览器边界也会被触发。利用它，我们便可以解决这个尴尬的问题了。

网络上典型的设置事件可在浏览器外触发的代码是这样的：

  1. var dv = document.getElementById("mydiv");   
  2. if(dv.setCapture){//IE浏览器   
  3.     dv.setCapture();   
  4. }else if(window.captureEvents){//FF等浏览器   
  5.     window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);   
  6. }  

不过我们，只针对IE8处理这个问题，所以在判断出IE版本的情况下，直接调用dv.setCapture();  便可以了。对于resiable和draggable组件来讲，通常都是在mousedown的时候setCapture()，mouseup的时候releaseCapture()，releaseCapture方法是setCapture方法的反过程。resizable组件修改的参考代码(draggable组件类似)：

  1. function doDown(e){   
  2.     isResizing = true;   
  3.     if(isIE===8){   
  4.         e.data.target.setCapture();   
  5.     }   
  6.     $.data(e.data.target, 'resizable').options.onStartResize.call(e.data.target, e);   
  7.     return false;   
  8. }  
  1. function doUp(e){   
  2.     isResizing = false;   
  3.     resize(e, true);   
  4.     applySize(e);   
  5.     if(isIE===8){   
  6.         e.data.target.releaseCapture();   
  7.     }   
  8.     $.data(e.data.target, 'resizable').options.onStopResize.call(e.data.target, e);   
  9.     $(document).unbind('.resizable');   
  10.     $('body').css('cursor','');   
  11.     return false;   
  12. }  

最终，我们用IE8来看看纠正的效果：
http://www.easyui.info/easyui/demo/window/062.html

相关 [resizable draggable ie8] 推荐：

resizable和draggable组件在IE8下浏览器越界无法释放对目标DOM控制的问题

- - WebUI框架使用参考
标题有点长， 不考虑IE8兼容性的朋友可以直接忽视本文，本文所提到的问题是只在IE8这个垃圾版本下才会有的问题. 大家在使用window组件的时候，应该注意到在IE8下，当resize或者拖动window超出浏览器边界的时候，被resize或者拖动的window组件实例依旧处于被reszie或者被拖动的状态，即便是松开鼠标也没有用.

media query ie8- 兼容实现总结

- - UX 一淘体验中心
由于业务形态原因，随着用户分辨率的提高，1024x768已不再是主流，宽屏用户比例越来越大，因此我们的响应式考虑如何充分利用PC用户设备上更多空间而设计. 下图为淘宝用户的屏幕分辨率和浏览器比例，鉴于ie8-浏览器目前占比约70%，media query的ie8-兼容迫于现实还是要做……. media query简介.

CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案

- - 博客园_首页
1.区别IE和非IE浏览器. background:blue; /*非IE 背景藍色*/. background:red \9; /*IE6、IE7、IE8背景紅色*/. 2.区别IE6,IE7,IE8,FF. 【区别符号】：「\9」、「*」、「_」. background:blue; /*Firefox 背景变蓝色*/.

Chrome 15超越IE8，成为全球最受欢迎浏览器

- - 36氪
互联网分析机构StatCounter发布的一项数据显示，在过去的三周里，Chrome 15的全球市场占有率已达24%，略高于IE8 的22.9%的市场占有率，成为全球最受欢迎的浏览器，火狐8占14%，位列第三. 微软今天刚宣布，不久后将 开启IE浏览器自动升级功能，将Windows XP上的IE6和IE7升级至IE8，将Windows Vista和Windows 7上的IE7和IE8升级至IE9.

谷歌停止对IE8的支持将目光转为Windows 8

- - WPDang
谷歌今天正式宣布，旗下的Google Apps将于11月15日停止对IE8的支持，在停止支持IE8的同时，也将目光转移至了Windows 8系统中. 2009年微软推出IE8浏览器，以配合Windows XP系统的发布，这也是微软第一次按照互联网行业标准而开发的浏览器，时至今日IE8仍旧是大批用户的选择.

DIV+CSS解决IE6，IE7，IE8，FF兼容问题

- - Web前端 - ITeye博客
1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以. 在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了. 2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如. margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;.

ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=3835. 一、发展与变化，疑问到实践. 我之前就多次提过（例如介绍 HTML5 API classList的时候）这样的疑问：“现代浏览器的API相当丰富与强大，几乎可以很轻松应付各类交互，为何还要引入庞大的JS框架.

全面兼容IE6、IE7、IE8、Firefox的CSS HACK方法

- - JavaScript - Web前端 - ITeye博客
本文和大家重点讨论一下DIV+CSS=2010全面兼容IE6/IE7/IE8/Firefox的CSS HACK，这里主要有两种方法解决IE兼容性问题，请看下文详细介绍. DIV+CSS=2010全面兼容IE6/IE7/IE8/Firefox的CSSHACK. 浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来IE6跟Firefox之间的兼容是很容易解决的.

使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境

- LiuWeifeng - 断桥残雪部落格
公司使用的是windows7操作系统，自己之前一直使用IETester来测试页面在IE6~IE8下的兼容性，可是在测试js的时候还是会出现实际使用的还是windows7的IE8内核问题. 所以自己想通过virtual PC来搭建个虚拟的测试环境，为什么选择virtual PC呢. 1、windows 7系统自带，并且xp mode就可以直接安装上xp系统.