百度地图 点击marker事件冒泡问题处理
2015-01-17 00:00
471 查看
百度地图API的事件处理:覆盖物的如何阻止冒泡
百度地图,为了让事件使用的更方便,进行一层封装详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm
主要的修改点:
1. 使用事件代理。
2. 重新封闭事件对象。
3. 事件对象的this指向map自己。
4. 附加了一些地图特有的属性,如地图位置point等。
说明: 对map对象和覆盖物都做了代理。
那么开发的时候,可能会遇到什么问题?
case: 事件穿透:
地图上有一个覆盖物, 当点击此覆盖物的时候,会招待执行对应操作,执行完之后,地图的普通poi也继续执行,也就是传说中的“事件穿透了”
很明显,这里需要阻止冒泡。想当然的,我们会使用如下的方法。
var map = new BMap.Map("allmap");var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 16);var circle = new BMap.Circle(point,500); map.addOverlay(circle); circle.onclick = function(e){ e.stopPropagation(); }
一招待发现有问题,stopPropagation方法找不到。
原来是bmap进行了封装,它将原始的事件放到一个domEvent中了。 这点与jquery是一样的处理,修复后的代码如下。
var map = new BMap.Map("allmap");var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 16);var circle = new BMap.Circle(point,500); map.addOverlay(circle); circle.onclick = function(e){ e.domEvent.stopPropagation(); }
OK了。
地图的源码实现如下
baidu.lang.Event.prototype.inherit = function (e) { var me = this; this.domEvent = e = window.event || e; me.clientX = e.clientX || e.pageX; me.clientY = e.clientY || e.pageY; 。。。。。
相关文章推荐
- ext中处理Combobox组件点击触发后台事件的问题
- js div 排除内部的点击事件 就是 冒泡的处理
- 百度地图3.0以上版本标注marker及其点击事件
- 《android按钮点击事件的频繁点击问题处理》
- [Android]在ListView嵌套GridView中出现的点击事件处理以及gridview显示不全的有关问题
- 在tableViewCell的点击事件中处理界面跳转问题
- 在ListView嵌套GridView中出现的点击事件冲突的处理以及gridview显示不全的问题
- Android长按事件和点击事件问题处理,OnItemLongClickListener和OnItemClickListener冲突问题
- div嵌套点击事件问题解决方法-阻止冒泡事件
- Android百度地图(三):百度地图画运动轨迹及图层点击事件处理
- JS事件冒泡问题的处理
- [Android]在ListView嵌套GridView中出现的点击事件处理以及gridview显示不全的问题
- 百度地图-点击事件问题
- 关于百度地图自定义覆盖物不能触发点击事件的处理
- JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
- jQuery中的事件处理:return false、阻止默认行为、阻止冒泡以及兼容性问题
- AndroidTV/机顶盒 ListView获取焦点与点击事件问题处理方案
- Android长按事件和点击事件问题处理,OnItemLongClickListener和OnItemClickListener冲突问题
- 快速点击事件问题处理(多次点击)
- 小程序之解决移动端点击和长按事件冒泡问题