IE和Chrome执行javascript对鼠标双击事件的不同响应
最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下:

由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能,实现思路如下:
(1)基于按钮的鼠标点击事件开启多边形标绘工具;
//开启/关闭违法标绘工具
function onClickPolyTool() {
var btn = document.getElementById("polyToolBtn");
if (btn.value == "开启违法标绘") {
btn.value = "关闭违法标绘";
polygonTool.open();
addMapClick();
} else {
btn.value = "开启违法标绘";
polygonTool.close();
removeMapClick(); }
}
(2)开启多边形标绘工具后,每次在地图上的单击均视为绘制多边形的一个点,该点位转换成经纬度坐标并被记录;
function addMapClick() {
//移除地图的点击事件
removeMapClick();
map.clearOverLays();
points = [];
//注册地图的点击事件
mapclick = TEvent.addListener(map, "click", function (p, btn) {
//将像素坐标转换成经纬度坐标
if (btn == 1) {
var lnglat = map.fromContainerPixelToLngLat(p);
//alert(lnglat.getLng() + "," + lnglat.getLat());
points.push(lnglat);
}
}); }
(3)双击鼠标,关闭TPolygonTool并结束标绘工作;
上述思路在Chrome浏览器下工作正常,且双击鼠标时鼠标所在的点也被记录并作为多边形最后一个点被记录。然而,在IE浏览器环境下,上述思路不能正常工作,表现为总是遗漏最后一个双击点,如下图:

由此可见,IE浏览器在对javascript的解释中,应该是将鼠标双击和单击事件进行了区分,而Chrome浏览器的鼠标双击事件也会触发单击事件,这是两种浏览器对鼠标单击/双击事件的不同响应方式。
因此,如果要在不同的浏览器环境下保持页面响应行为的一致性,问题的解决方法如下:
(1)加载页面时区分浏览器类型
//浏览器信息
var browserName = '';
var isChrome = -1, isIE = -1;
function getbrowserInfo() {
browserName = navigator.userAgent.toLowerCase();
isChrome = browserName.indexOf("chrome") > -1;
isIE = browserName.indexOf("msie") > -1;
//alert(isChrome);
//alert(isIE);
if (!isChrome && !isIE) {
alert("请使用采用Chrome或IE类型内核的Web浏览器,以获取最佳用户体验!");
}
}
(2)根据浏览器类型为天地图map控件添加不同的事件监听
function addMapClick() {
//移除地图的点击事件
removeMapClick();
map.clearOverLays();
points = [];
//注册地图的点击事件
mapclick = TEvent.addListener(map, "click", function (p, btn) {
//将像素坐标转换成经纬度坐标
if (btn == 1) {
var lnglat = map.fromContainerPixelToLngLat(p);
//alert(lnglat.getLng() + "," + lnglat.getLat());
points.push(lnglat);
}
});
if (isIE) {
mapdbclick = TEvent.addListener(map, "dblclick", function (p) {
//将像素坐标转换成经纬度坐标
var lnglat = map.fromContainerPixelToLngLat(p);
//alert(lnglat.getLng() + "," + lnglat.getLat());
points.push(lnglat);
});
}
}
IE和Chrome执行javascript对鼠标双击事件的不同响应的更多相关文章
- javascript模拟鼠标双击事件
通常我们在做开发的时候需要通过单击切换对立事件,简单做了一个模型. <!DOCTYPE html> <html> <head> <title>javas ...
- EasyUI使用之鼠标双击事件
easyui鼠标双击事件,使用 onDblClickRow(index, row) 事件,在用户双击一行的时候触发,参数包括: index:点击的行的索引值,该索引值从0开始. row:对应于点击行的 ...
- MFC鼠标单击截获鼠标双击事件,且无法记录单击的数据的解决方案
遇到的问题: 鼠标点击会截断鼠标双击的事件,无法保存椭圆的数据.也就是说双击执行的过程是OnLButtonDown,OnLButtonUp,OnLButtonDblClk,OnLButtonUp.并不 ...
- WPF 之 鼠标双击事件
由于WPF中没有鼠标的双击事件,因而只能通过MouseDown事件来模拟.当连续的两次MouseDown事件的时间间隔,没有超过一个设定的时间阈值时,就计算为一个双击事件,并作相应的处理. 利用WPF ...
- Silverlight 鼠标双击 事件
Silverlight 双击事件例子 <UserControl x:Class="MouseDbClick.MainPage" xmlns="http://sche ...
- java列表组件鼠标双击事件的实现
Swing中提供两种列表组件,分别是列表框(JList)和组合框(JComboBox). 一.JList组件 构造方法: public JList():构造一个空的.具有只读模型的JList.publ ...
- javascript 处理鼠标右键事件
使用右键事件 在需要右键的地方加上 onmousedown="if(event.button == 2) alert('点击右键了!');即可 不经意地被一位同事问起在javascri ...
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- Unity 如何检测鼠标双击事件
代码如下: void OnGUI(){ Event e=Event.current; )) Debug.Log("用户双击了鼠标"); }
随机推荐
- 8:String类
String类 String类的特点: 字符串对象一旦被初始化就不会被改变. 字符串是最常用的类型之一,所以为了使用方便java就给封装成了对象方便使用 public static void str ...
- kubernetes集群搭建(7):常见问题及处理
尤其在创建pod的时候,会遇见各类问题,请通过下列命令来查看错误详情 kubectl describe pod xxxxxx 1.问题现象:镜像始终获取不下来 解决办法:为docker设置镜像源 [r ...
- python之发送邮件~
在之前的工作中,测试web界面产生的报告是自动使用python中发送邮件模块实现,在全部自动化测试完成之后,把报告自动发送给相关人员 其实在python中很好实现,一个是smtplib和mail俩个模 ...
- Django--分页器(paginator)
1 Django的分页器(paginator)简介 在页面显示分页数据,需要用到Django分页器组件 from django.core.paginator import Paginator Pagi ...
- SQL Server性能优化(14)索引碎片
一. 外部碎片和内部碎片的概念 碎片的概念和检测,参考MSDN:https://msdn.microsoft.com/zh-cn/library/ms189858.aspx 二.对于碎片的解决办法 解 ...
- 无源码调试smali
0x01 工具①Android Studio最新版.(用的1.5)②apktool尽量使用最新版的.(反编译本人用baksmali-2.1.3.jar)③smalidea插件.下载地址https ...
- CentOS 6.5静态IP的设置(NAT和桥接联网方式都适用)
不多说,直接上干货! 为了方便,用Xshell来.并将IP设置为静态的.因为,在CentOS里,若不对其IP进行静态设置的话,则每次开机,其IP都是动态变化的,这样会给后续工作带来麻烦.为此,我们需将 ...
- 边缘化搭建 DotNet Core 2.1 自动化构建和部署环境(下)
写在前面 本篇文章是上一篇边缘化搭建 DotNet Core 2.1 自动化发布和部署(上)的后续操作,本文主要讲解如何开启Docker Remote API,开启Remote API后的权限安全问题 ...
- 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Docker容器的创建、启动、和停止
1.容器是独立运行的一个或一组应用,及他们的运行环境.容器是Docker中的一个重要的概念. 2.docker容器的启动有三种方式a.交互方式,基于镜像新建容器并启动例如我们可以启动一个容器,打印出当 ...