vue项目中为高德地图信息窗体添加点击事件踩坑

这里遇到了一个坑，在给信息窗体中的内容添加点击事件时，信息窗体弹出的时候点击事件自动执行了。在此记录一下踩坑和解决过程。

部分代码如下：

this.map.on('click', e => {
	const item = {
		val: 1234,
		name: 'zhang'
	}
	const content =`<li οnclick='Boxjump()' style='color:blue;text-align:right;text-decoration: underline;'><a>详情</a></li>  `
	window.Boxjump = () => {
        this.Boxjump(item.userNumber);
    };
	let infoWindow = new AMap.InfoWindow({
        // isCustom: true, //使用自定义窗体
        content,
        offset: new AMap.Pixel(x, y),
        autoMove: true, //是否自动调整窗口到视野内
        closeWhenClickMap: true, // 点击地图是否关闭信息窗体
        showShadow: true //是否显示信息窗体阴影
      });
    infoWindow.open(this.map, coordinate);
}

Boxjump(val){
	console.log(val)
}

坑1

坑2

解决方案

原因：这是因为你的弹窗内容是以字符串的形式插入到 DOM 中的。此时你给它添加的点击事件不会被 Vue 的事件监听系统所识别和处理，因为这是在 Vue 的作用范围之外的。但是，如果你把这个函数挂载到 window 对象上，那么无论在哪个地方调用这个函数，浏览器都能找到并且执行它。