惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
博客园 - 【当耐特】
量子位
博客园 - 叶小钗
有赞技术团队
有赞技术团队
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - Franky
博客园 - 司徒正美
爱范儿
爱范儿
美团技术团队
小众软件
小众软件
酷 壳 – CoolShell
酷 壳 – CoolShell
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
罗磊的独立博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Last Week in AI
Last Week in AI
Hugging Face - Blog
Hugging Face - Blog
I
InfoQ
D
DataBreaches.Net
宝玉的分享
宝玉的分享

博客园 - 一叶浮萍

Visual Studio 2022 Net6.0 无法发现testcase, 也无法执行test case Microsoft.AspNetCore.Http.Abstractions 2.20 is deprecated 使用office365 world2016发布编辑备份你的博客 使用office365 world2016发布编辑备份你的博客 You are not late! You are not early! 在同一个服务器(同一个IP)为不同域名绑定的免费SSL证书 Vue.js Is Good, but Is It Better Than Angular or React? It was not possible to find any compatible framework version VS增加插件 Supercharger破解教程 Git使用ssh key Disconnected: No supported authentication methods available (server sent: publickey) VS 2013打开.edmx文件时报类型转换异常 64位系统里注册32位软件 System.Data.Dbtype转换为System.Data.SqlDbType Bonobo Git Server (Simple git server for Windows.) 测试备忘 TortoiseGit bonobo gitserver记住帐号密码 TortoiseGit bonobo gitserver记住帐号密码 TITLE: BizTalk Server 2013 Administration Console 应用程序-特定 权限设置并未向在应用程序容器 不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC) 中的用户
Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
一叶浮萍 · 2015-07-17 · via 博客园 - 一叶浮萍

问题描述:

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) {

//ie10chrome都会走到此处

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,因为在IE10navigator.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也要去掉。