openalyers为自定义覆盖物overlay添加点击事件

在项目的实际需求中，勾选某个小区的地址，需要在地图上定义小区的位置，即在地图上添加overlay覆盖物，点击overlay覆盖物展示该小区的三维场景，刚开始的实现方法点击事件不生效，详细代码如下所示：

    <div id="map" style="width: 100%">
        <div id="anchor">
            <img src="./img/point_search.png" style="display:none;" />
        </div>
    </div>
    <script type="text/javascript">
        var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'map',
            view: new ol.View({
              center: [117.210813092,39.0839299033],
              projection:"EPSG:4326",
              zoom: 14
            })
        });
        $("#anchor img").css("display","block");
        var anchor = new ol.Overlay({
            element:document.getElementById("anchor")
        });
        anchor.setPosition([117.210813092,39.0839299033]);
        map.addOverlay(anchor);
        //为地图覆盖区添加点击事件
        anchor.on("click",function(){  //不生效
            alert("点击地图覆盖物!");
        });

由以上代码可以看出，为自定义覆盖物overlay添加点击事件并不生效，然而从Stack Overflow上发现了解决办法，如下所示：


不应该给overlay添加click事件，而应该给html元素添加click事件，因此把上面的实现代码改写成下面的形式，程序就可以跑了：

$("#anchor").on("click",function(){//生效
     alert("点击地图覆盖物!");
});