Question

我有一个svg，里面有一些元素，完整的代码在这里capture event，飞机图像通过transform属性定位，使其落入image href2 <div id="app"> <svg xmlns="http://www.w3.org/2000/svg" width="1015px" height="580px" viewBox="-50 -50 1015 580" preserveAspectRatio="xMidYMid meet" version="1.1" id="svg"> <g @click="showFlightCard" v-for="(ge, index) in this.gEl" :key="index"> <path :id="index+1" d="M 400 100 L 150 150" stroke="red" stroke-width="3" fill="none" /> <image :id="index" :href="href1" width="48" height="24" transform="translate(251,143)"></image> </g> <image x="250" y="10" width="522" height="402.452" id="e4_image" preserveAspectRatio="xMidYMid meet" :href="href2" style="stroke:black;stroke-width:1px;fill:khaki;"/> </svg> </div>。问题是Vue无法检测飞机图像上的点击事件。我似乎无法找到解决这个问题的方法。我希望能够将事件监听器附加到飞机图像上，无论屏幕位于何处。

在jQuery中解决这些情况就像是轻松的空气，但Vue似乎是一个不同的故事。

这是HTML

var app = new Vue({
  el: '#app',
  methods: {
    showFlightCard: function (e) {
        console.log('Click')
    }
  },
  data: {
    message: 'Hello Vue!',
    gEl: ['A', 'B', 'C'],
    href1: 'look at the jsfiddle',
    href2: 'look at the jsfiddle'

  }
})

这是JS，为了清楚起见，由于64位编码，我避免了这里的href，这太长了，请查看包含href的jsfiddle。

flex-basis

Answer 1

您可以将点击侦听器附加到svg本身的路径或svg的父元素上。 svg标记本身的点击侦听器似乎不会触发事件。

Vue无法附加事件监听器

1 个答案: