手机移动端百度开发覆盖物点击事件不起作用
2017-05-17 11:29
495 查看
div.addEventListener('touchstart',function(e){ console.log("内部定义的:touchstart"); console.log(e.target.textContent); this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#fff"; //边框颜色 })
我在移动端使用了百度地图,给地图添加了click事件,跳转新页面。在网页端测试时完全没有问题,但是在移动端点击却没有反应。如果用touch事件的画整个地图的拖动缩放都不能用了,直接一接触地图就跳转了map.addEventListener("click", function(e){ //点击事件 window.location.href='./test.html'; });找了半天资料没看到相似情况。不知道该怎么解决。我想在移动端实现点击click事件。不影响地图的所有功能。现在只用map.disableDragging();才能触发click事件,但是等于说拖动事件被禁止了。
首先就是页面是 4000 放在微信端的。iOS端表现正常,点击和拖动可以同时存在。Android端表现有问题,click和drag必须舍弃一个。我的解决办法: if (isAndroid()) { $('.BMap_mask').on('touchstart', function (e) { map.disableDragging(); }); $('.BMap_mask').on('touchmove', function (e) { map.enableDragging(); }); $('.BMap_mask').on('touchend', function (e) { map.disableDragging(); }) map.addEventListener("click", function (e) { }); }else{ } |
在PC端一切正常,然后在手机端,也就是移动版的,自定义覆盖物的Click事件无法触发,试了多种方法都不行。
网友的方法也试了,无外乎三种,一种是改用touch事件,一种是使用开源库里的EventWrapper,一种是先把map的click事件保存成设置为null,然后在自定义覆盖物的touchstart或touchend事件里先执行map的click现执行其它代码。三种都试了,都不行。
最后找到一个解决办法,就是在自定义覆盖物的初始化方法里添加touch事件。
贴上示例代码:测试:只有在接口内定义才有效果
CustomMarkerOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
var img=this._img=document.createElement("img");
img.src="1.png";
//这里对img添加事件,也可以对div或其它dom添加事件。
img.addEventListener('touchstart',function(){
alert('touch started');
});
img.addEventListener('touchmove',function(){
console.log('touching');
});
img.addEventListener('touchend',function(){
alert('touch end');
})
div.appendChild(img);
map.getPanes().labelPane.appendChild(div);
return div;
}
百度的开源库实现方法。 http://developer.baidu.com/map/index.php?title=open/library——》事件包装器,引入js文件,然后根据api调用方法:http://api.map.baidu.com/library/EventWrapper/1.2/docs/symbols/BMapLib.EventWrapper.html
相关文章推荐
- 移动端H5,Hybird开发点击穿透事件处理
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
- 移动端touch事件 之 百度 touch.js 开发文档
- 关于iphone手机上点击事件不起作用
- 做高德地图手机端开发时,遇到了点击覆盖物触发监听点击地图的事件
- 移动端开发ios下body点击事件无法触发的解决方法
- 关于iphone手机上点击事件不起作用
- 移动端、移动开发 点击事件后出现闪或者黑色背景
- Android开发之新版百度map的调用(二):map中添加覆盖物及响应事件和弹出POP功能
- 发现Delphi.XE2.Update3 上使用 FireMonkey 开发,对 TImage3D 连续多次点击后,OnClick事件就不响应的解决
- cocos2d-x 游戏开发----给单个精灵绑定点击事件
- Android开发 - 常用点击响应事件OnClickListener
- UIButton点击事件不起作用
- Android开发中在ListView中经常有Item的点击事件及Button或ImageButton等需要被点击的事件之间的处理方法
- webapp手机移动端开发技巧
- android开发模拟click点击事件
- JQuery在UpdatePanel中当事件点击后JQuery事件不起作用的解决办法(JQuery与UpdatePanel问题解析)
- Android-ListView中嵌套(ListView)控件时item的点击事件不起作用的问题
- iphone开发笔记:为UIImageView添加点击事件