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时也要去掉。

?

Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

时间: 2024-10-29 00:15:13

Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框的相关文章

手机站建设HTML5触摸屏touch事件使用介绍

手机站建设HTML5触摸屏touch事件使用介绍技术 maybe yes 发表于2015-01-05 14:42 原文链接 : http://blog.lmlphp.com/archives/56  来自 : LMLPHP后院 市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好.PC上还没有哪个事件是可以与触屏手机的触摸事件对

MVC .NET4 IE10下FormsAuthentication.SetAuthCookie无效的问题

最初的问题是网站在IE10下不兼容,使用兼容性代码:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"> 让IE强制使用兼容模式,但是这种情况在有的电脑上没有管理员权限的时候是无效的, 即用IE打开了使用上面这段代码的页面后,按F12, IE的模式还是IE模式,不是想要的IE10兼容模式. 在有管理员权限的电脑上,变成了IE10兼容模式,问题解决. 另外FormsAuthenticati

HTML5触摸屏touch事件使用介绍1

市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好.PC上还没有哪个事件是可以与触屏手机的触摸事件对应的,为了更好的用户体验,移动站点的建设也需要对不同的事件进行处理. 介绍几种兼容比较好的触摸事件,大部分触屏设备都支持的. touchstart:触摸开始的时候触发 touchmove:触摸时手指在屏幕上滑动的时候触发 tou

FCKEditor在IE10下的不兼容问题解决方法

环境介绍:FCKEditor 版本 2.x.x 问题:IE10 下FCKEditor不兼容,显示不出来 关键词:不同于其他方法之处是第一个关键点,其他网友的正则表达式不对 解放方法:(可以直接<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />解决,也可以如下) 1.在 fckeditor/fckeditor.js 文件 > 方法: FCKeditor_IsCompatibleB

SSRS (SQL Server Report Service) 在IE9, IE10下显示不全的解决办法

在做项目的过程中遇到SSRS与IE9, IE10不兼容的情况,具体表现为报表页面在IE9 和 IE10下面只显示三分之一,靠左显示,下方有滚动条,右三分之二为空白.查看源代码后发现,上面一个<tr>里只有一个<td>,并colspan=3, 下面报表内容区域的<tr>有三个<td>但前两个是hidden的.最初是想把表格结构调整下,去掉前面hidden的两个<td>,后来发现太麻烦不说,还改变了微软原来的表单内容.就在网上搜索解决方案,微软自己说

JFreechart在linux下不显示及中文乱码问题

一.使用JFreeChart建的报表,在window下能正常显示,但是放到linux下就报错,而且有时候会把tomcat挂掉, 原因是jfreechart的在linux系统中需要访问java awt库提供...... 一.使用JFreeChart建的报表,在window下能正常显示,但是放到linux下就报错,而且有时候会把tomcat挂掉,原因是jfreechart的在linux系统中需要访问java awt库提供的图形功能,而linux下的绝大多数版本的java awt类库都需要x serv

Windows下VC++显示UTF-8编码中文

笔者在Windows下使用C++编写程序接收UTF8字符串会发生中文无法正常在console上显示的问题,故特来解决UTF8字符串如何在VC++上正常显示. 1.问题重现,UTF-8编码下的字符串“中文”在Windows下的显示如下图,其中上行为UTF8字符串,下行为GBK字符串: 2.方法:将UTF-8格式的代码变为GBK编码(需要Windows.h头文件) 1 string UTF8ToGBK(string &strUtf8) 2 { 3 string strOutGBK = "&q

a标签的背景图在ie8下不显示的问题

突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另外一个同事机器上就会有这个问题, 真心奇怪! 后来找到问题的原因, 是因为在ie8下要显示a标签的背景图有一个重要属性: display:block; 同时还要注意background属性中 no-repeat 前面的空格. 改正之后, 背景图正常显示了. 不过同是ie8, 一个可以, 一个却不行这

ubuntu 14.04下chrome显示标题乱码问题

最近ubuntu 14.04和chrome都升级成最新版后,chrome标题栏和书签栏都不能正常显示中文了. 然后搜了下发现这样可以解决: 修改文件 /etc/fonts/conf.d/49-sansserif.conf 将其中标红部分修改一个已经安装的中文字体,我现在用的时文泉驿微米黑所以就这样改: 修改前: <edit name="family" mode="append_last"> <string>sans-serif</str