OpenLayers 2中使用DrawFeature绘制线时点击事件无法触发的问题

这个问题其实是OpenLayers 2的DrawFeature控件默认行为导致的——它在处理鼠标点击（用于创建线段顶点）时，会阻止事件向上冒泡到地图容器，所以你绑定在地图上的click事件就接收不到了。下面给你两种可行的解决思路：

思路一：让DrawFeature传递事件 #

你可以重写DrawFeature控件的事件处理方法，移除它阻止事件冒泡的逻辑。比如针对画线（Path类型）的情况，修改handleMouseDown方法：

// 先创建DrawFeature控件
var drawLine = new OpenLayers.Control.DrawFeature(
    vectorLayer,
    OpenLayers.Handler.Path
);

// 重写handleMouseDown方法，去掉阻止冒泡的代码
drawLine.handler.handleMouseDown = function(evt) {
    // 保留原有的画线逻辑
    var handled = OpenLayers.Handler.Path.prototype.handleMouseDown.apply(this, arguments);
    // 不要阻止事件冒泡，让地图的click事件能触发
    // 注释掉原代码里的 evt.stopPropagation() 和 evt.preventDefault()
    return handled;
};

// 添加控件到地图
map.addControl(drawLine);
drawLine.activate();

这样修改后，每次点击创建线段顶点时，事件会继续传递到地图，你的原click事件就能正常触发了。

思路二：监听DrawFeature的专属事件 #

如果你不需要依赖地图的click事件，直接监听DrawFeature控件在画线过程中触发的事件会更合适。比如：

• vertexadded：每次添加一个线段顶点（也就是你点击创建新线段的点）时触发
• featureadded：整个线段画完（双击结束）时触发

示例代码：

var drawLine = new OpenLayers.Control.DrawFeature(
    vectorLayer,
    OpenLayers.Handler.Path
);

// 监听顶点添加事件，对应每次点击创建线段点的动作
drawLine.events.register("vertexadded", drawLine, function(evt) {
    // 这里写你原来在click事件里的逻辑
    console.log("创建了新线段顶点，坐标：", evt.vertex.geometry.x, evt.vertex.geometry.y);
});

map.addControl(drawLine);
drawLine.activate();

这种方式更符合OpenLayers控件的设计逻辑，避免了事件冒泡的冲突问题。

额外提示 #

如果你只是想在未激活DrawFeature控件时触发地图click事件，激活时不触发，那其实不需要修改任何代码——只需要在激活DrawFeature时，暂时解绑地图的click事件，停用控件时再重新绑定即可。

内容的提问来源于stack exchange，提问作者user701934