@click,@click.native失效问题(原生js代码innerHTML中填充vue页面,页面中点击事件失效)
解决方式:
window.mapVue = this
<input onclick="window.mapVue.locusPath()" type="button" value="轨迹" class="butclass butfont"/>
-----------------------------------------------------------------------
背景:
最近使用mapbox开发时遇到弹框事件问题,代码如下:
//绑定点的弹窗
self.popupInfoWindow = new mapboxgl.Popup({
closeButton: true,
closeOnClick: false,
offset: {
bottom: [0, -34]
}
})
nrmap.on('click', 'multiPointLayer', function(e) {
var features = self.map.queryRenderedFeatures(e.point)
var reset = {
objId: 'obeid',
appNo: 'appNo'
}
self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates).setHTML(document.getElementById('orderDetail').innerHTML)
.addTo(nrmap)
})
addTo -- nrmap 原生的js innerHTML 放的是一个vue组件 组件中 @click 事件无效;
@click.native 和 js add最近使用mapbox开发时遇到弹框事件问题,代码如下:
//绑定点的弹窗
self.popupInfoWindow = new mapboxgl.Popup({
closeButton: true,
closeOnClick: false,
offset: {
bottom: [0, -34]
}
})
nrmap.on('click', 'multiPointLayer', function(e) {
var features = self.map.queryRenderedFeatures(e.point)
var reset = {
objId: 'obeid',
appNo: 'appNo'
}
self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates).setHTML(document.getElementById('orderDetail').innerHTML)
.addTo(nrmap)
})
addTo -- nrmap 原生的js innerHTML 放的是一个vue组件 组件中 @click 事件无效;
@click.native 和 js的 document.getElementById("id").addlistener('click',()=>{ }) 等等都试了 无效果。
最后使用的是:
<template>
<div class="gjbutton">
<input onclick="window.mapVue.locusPath()" type="button" value="轨迹" class="butclass butfont"/>
</div>
</template>
mounted() {
window.mapVue = this
},
methods: {
locusPath() {
let self = this
let data = {}
self.bus.$emit('dr-order-locus', data)
},
}