IE和Chrome执行javascript对鼠标双击事件的不同响应

最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下:

由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能,实现思路如下:

(1)基于按钮的鼠标点击事件开启多边形标绘工具;

 1 //开启/关闭违法标绘工具
 2 function onClickPolyTool() {
 3     var btn = document.getElementById("polyToolBtn");
 4     if (btn.value == "开启违法标绘") {
 5         btn.value = "关闭违法标绘";
 6         polygonTool.open();
 7         addMapClick();
 8     } else {
 9         btn.value = "开启违法标绘";
10         polygonTool.close();
11         removeMapClick();
12
13     }
14 }

(2)开启多边形标绘工具后,每次在地图上的单击均视为绘制多边形的一个点,该点位转换成经纬度坐标并被记录;

 1 function addMapClick() {
 2     //移除地图的点击事件
 3     removeMapClick();
 4     map.clearOverLays();
 5     points = [];
 6     //注册地图的点击事件
 7     mapclick = TEvent.addListener(map, "click", function (p, btn) {
 8         //将像素坐标转换成经纬度坐标
 9         if (btn == 1) {
10             var lnglat = map.fromContainerPixelToLngLat(p);
11             //alert(lnglat.getLng() + "," + lnglat.getLat());
12             points.push(lnglat);
13         }
14     });15 }

(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);
        });
    }
}
时间: 2024-08-29 03:04:46

IE和Chrome执行javascript对鼠标双击事件的不同响应的相关文章

Qt鼠标双击事件mouseDoubleClickEvent(QMouseEvent* event)

重写mouseDoubleClickEvent(QMouseEvent event)* 1.实例:双击窗口时输出"sss" /*widget.h*/ #ifndef WIDGET_H #define WIDGET_H #include<QWidget> #include<QDebug> class Widget : public QWidget { Q_OBJECT public: Widget(QWidget* parent=0); ~Widget(){} p

BaseTool中鼠标双击事件获取鼠标位置的方法

ArcGISEngine的BaseTool类中提供了鼠标双击.鼠标移动.鼠标按键按下.鼠标按键弹起四种鼠标事件,但是鼠标双击事件的参数跟其他三种不一样,双击事件中没有提供鼠标位置信息. public virtual void OnDblClick(); public virtual void OnMouseDown(int Button, int Shift, int X, int Y); public virtual void OnMouseMove(int Button, int Shift

Silverlight 鼠标双击 事件

Silverlight 双击事件例子 <UserControl x:Class="MouseDbClick.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsof

javascript 处理鼠标右键事件

使用右键事件 在需要右键的地方加上  onmousedown="if(event.button == 2) alert('点击右键了!');即可 不经意地被一位同事问起在javascript里面如何检测右键事件,并且屏蔽原来的右键菜单,上网查找一翻之后发现一些比较简单的方法.如设置onmousedown,检查其event.button的值是不是2(代表右键).这个方法在FF和IE中都可用,但是在Maxthon中event.button却是0,这让我有点困惑,Maxthon不是IE内核的吗?我只能

Unity 如何检测鼠标双击事件

代码如下: 1 void OnGUI(){ 2 Event e=Event.current; 3 if(e.isMouse&&(e.clickCount==2)) 4 Debug.Log("用户双击了鼠标"); 5 }

winform listbox增加鼠标双击事件

在Form.Designer.cs文件中对于listBox处理: listBox.MouseDoubleClick += new system.Windows.Forms.MouseEventHandler(listBox1_MouseDoubleClick); 在Form.cs代码文件中增加函数: private void listBox1_MouseDoubleClick(object sender, MouseEventArgs e) { int index = listBox1.Inde

JavaScript键盘鼠标事件处理

监听键盘鼠标事件 监听某个按键事件 当键盘上的某个键被按下时,会依次触发一次下面的事件: onkeydown: 键盘按下这个动作(按下键盘) onkeypress: 键盘被按住(一直按着键盘不动) onkeyup: 键盘被弹起(松开键盘) 通过监听keydown事件既可以知道键盘被按下: document.onkeydown = function(event) { // 键盘按下时触发 console.log('key down'); }; document.onkeypress = funct

WPF DataGrid 鼠标双击选中的DataGridRow及Row数据

设置DataGrid的MouseDoubleClick事件 代码 //DataGrid鼠标双击事件 Private void dataGrid_MouseDoubleClick(object sender, MouseButtonEventArgs e) { if(this.dataGrid.SelectedIndex == -1) { return; } DataGridRow row = (DataGridRow)dataGrid.ItemContainerGenerator.Contain

javascript中常用的事件绑定方法

我们要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="JavaScript Code" 其中