你的位置:首页 > 数据库

[数据库]Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框


问题描述:

Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框。

正常情况为:

而现在情况为:

 

问题分析:

公司有各种型号电脑,X230,W530,X240,业务部门多使用x240, 这一款笔记本屏幕带有触摸屏功能,其他型号没有。所有操作系统都为win8,IE10小版本号也一致。

最初就将问题定位为触摸屏引起了这个问题,但一直无法找到具体原因。因为在chrome,firfox等浏览器没有问题,只有在IE上有问题,所以给微软开了单子来查找原因。

 

微软的同学经过1周多的排查,分析echarts代码,终于发现不出现悬浮框是因为mousemove的事件没有添加上。至此原因已定位。

if (window.addEventListener) {

//ie10和chrome都会走到此处

window.addEventListener('resize', this._resizeHandler);

if (env.os.tablet || env.os.phone) {

//IE 10 触摸屏下env.os.tablet 为true,只走下列代码

root.addEventListener('touchstart', this._touchstartHandler);

root.addEventListener('touchmove', this._touchmoveHandler);

root.addEventListener('touchend', this._touchendHandler);

} else {

// chrome则走此处代码

root.addEventListener('click', this._clickHandler);

root.addEventListener('dblclick', this._dblclickHandler);

root.addEventListener('mousewheel', this._mousewheelHandler);

root.addEventListener('mousemove', this._mousemoveHandler);

root.addEventListener('mousedown', this._mousedownHandler);

root.addEventListener('mouseup', this._mouseupHandler);

}

root.addEventListener('DOMMouseScroll', this._mousewheelHandler);

root.addEventListener('mouseout', this._mouseoutHandler);

} else {

window.attachEvent('onresize', this._resizeHandler);

root.attachEvent('onclick', this._clickHandler);

root.ondblclick = this._dblclickHandler;

root.attachEvent('onmousewheel', this._mousewheelHandler);

root.attachEvent('onmousemove', this._mousemoveHandler);

root.attachEvent('onmouseout', this._mouseoutHandler);

root.attachEvent('onmousedown', this._mousedownHandler);

root.attachEvent('onmouseup', this._mouseupHandler);

}

evn.os.tablet和evn.os.phone的取值代码如下:

os.tablet = !!(ipad || playbook || android && !ua.match(/Mobile/) || firefox && ua.match(/Tablet/) || ie && !ua.match(/Phone/) && ua.match(/Touch/));

os.phone = !!(!os.tablet && !os.ipod && (android || iphone || webos || blackberry || bb10 || chrome && ua.match(/Android/) || chrome && ua.match(/CriOS\/([\d.]+)/) || firefox && ua.match(/Mobile/) || ie && ua.match(/Touch/)));

 

其中如果是IE情况tablet是判断useragent中是否存在Touch,因存在所以tablet为true。

根据文档http://blogs.msdn.com/b/ie/archive/2012/07/12/ie10-user-agent-string-update.aspx, IE10在触摸环境下的UserAgent串如下:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch)

 

微软给出了如下建议,但其实没有人想判断Agent,因为在IE10中navigator.maxTouchPoints一直取不到值,微软的同学你知道吗?

尽量避免做browser detection,而应该做feature detection,参考:https://msdn.microsoft.com/en-us/hh561717.aspx

解决办法有两个,我们采取了第一点:

  1. 修改echarts.js文件,修改evn.os.tablet和evn.os.phone的取值代码,不在判断是否是touch。一直默认为false。
  2. 修改echarts.js文件,去掉此判断if (env.os.tablet || env.os.phone),无论任何情况都添加两种事件。当然如果此中办法,需要在detachEvent时也要去掉。