zoukankan      html  css  js  c++  java
  • 百度地图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;
    。。。。。
  • 相关阅读:
    jQuery之$().each和$.each的区别(转)
    js获取非行间样式--有bug,忧伤
    js之数组方法
    js之检测对象类型
    for-in枚举对象属性
    jq 处理select 下拉框
    阿里大鱼短信发送服务应用实例(PHP SDK)
    php RSA 非对称加解密实例
    JS HTML table 生成 Excel文件
    php RSA 加解密实例
  • 原文地址:https://www.cnblogs.com/well1010/p/3509453.html
Copyright © 2011-2022 走看看