svg 按钮对点击没有反应

大佬教程收集整理的这篇文章主要介绍了svg 按钮对点击没有反应，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决svg 按钮对点击没有反应？

我正在使用 Vue、Leaflet 和 Ionic 构建一个简单的应用程序。我有一个带有圆形菜单（由 SVG 构建）的居中光标，可以在地图上的标记上开始操作。例如。一个可以放在标记上的菜单，有 2 个按钮：“删除”和“退出菜单”。 “退出菜单”按钮（右下）完美运行，

@click.prevent="exitBankje" 被执行

，但“删除”按钮（右上角）对鼠标点击没有反应。

@click.prevent="deleteBankje"

未执行。

希望有人能告诉我我做错了什么。

Vue deleteBankje 组件：

<template>
  <div style="z-index: 9999"
  >
    <div class="centermenu">
      <svg height="150" wIDth="150">
        <line
          x1="75"
          y1="0"
          x2="75"
          y2="55"
          style="stroke: rgb(255,0); stroke-wIDth: 2"
        />
        <line
          x1="75"
          y1="95"
          x2="75"
          y2="150"
          style="stroke: rgb(255,0); stroke-wIDth: 2"
        />
        <line
          x1="0"
          y1="75"
          x2="55"
          y2="75"
          style="stroke: rgb(255,0); stroke-wIDth: 2"
        />
        <line
          x1="95"
          y1="75"
          x2="150"
          y2="75"
          style="stroke: rgb(255,0); stroke-wIDth: 2"
        />
      </svg>
    </div>

    <div class="centermenu">
      <div style="transform: translate(85px,0pX);">
        <a @R_419_6839@="#" @click.prevent="deleteBankje" style="pointer-events: auto;">
          <svg height="75" wIDth="75">
            <path
              d="M0 55 L0 0  A 65 65 0 0 1 65 65 L10 65z"
              style="
                fill: #4d4d4d;
                stroke: #000000;
                stroke-wIDth: 0.55;
                stroke-linejoin: round;
                stroke-miterlimit: 4;
                stroke-dasharray: none;
                stroke-opacity: 1;
                paint-order: markers fill stroke;
                fill-opacity: 1;
                opacity: 0.5;
              "
              fill="none"
            />
          </svg>
        </a>
      </div>
    </div>
    <img
      src="../assets/images/minus.png"
      wIDth="40"
      height="40"
      class="centermenu ttr"
      @click.prevent="deleteBankje"
    />

    
<!-- Segment rechts onder -->
    <div class="centermenu">
      <div style="transform: translate(85px,85pX);">
        <a @R_419_6839@="#" @click.prevent="exitBankje" style="pointer-events: auto;">
          <svg height="75" wIDth="75">
            <path
              d="M 10 0 L65 0 A 65 65 0 0 1 0 65 L0 10z "
              style="
                fill: #4d4d4d;
                stroke: #000000;
                stroke-wIDth: 0.55;
                stroke-linejoin: round;
                stroke-miterlimit: 4;
                stroke-dasharray: none;
                stroke-opacity: 1;
                paint-order: markers fill stroke;
                fill-opacity: 1;
                opacity: 0.5;
              "
              fill="none"
            />
          </svg>
        </a>
      </div>
    </div>
    <img
      src="../assets/images/cross.png"
      wIDth="40"
      height="40"
      class="centermenu tbr"
      @click.prevent="exitBankje"
    />

  </div>
  
</template>

<script>
import { eventHub } from "../main";


export default {


  methods: {
    deleteBankje() {
      console.log("deleteBankje.vue: deleteBankje emitted");
      eventHub.emit("deleteBankje");
      eventHub.emit("enddelete");
    },exitBankje() {
      console.log("deleteBankje.vue: enddelete emitted");
      eventHub.emit("enddelete");
    },},};
</script>

<style scoped>
.centermenu {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  wIDth: 150px;
  height: 150px;
}

.ttr {
  pointer-events: auto;
  transform: scale(0.3,0.3) translate(120px,-120pX);
}


.tbr {
  pointer-events: auto;
  transform: scale(0.3,120pX);
}

</style>

调用delete-bankje组件的app.Vue：

<template>
  <ion-app>
    <ion-content style="height: 100%;wIDth:100%;">
      <!-- <ion-router-outlet /> -->
      <front-page :bankjes="bankjes" v-if="dataReceived"></front-page>

      <menu-bar />
      <add-bankje v-if="showAddOverlay"></add-bankje>
      <delete-bankje v-if="showdeleteOverlay"></delete-bankje>
    </ion-content>
  </ion-app>
</template>

<script >
// import { IonApp,IonRouterOutlet } from '@ionic/vue';
import { IonApp,IonContent } from "@ionic/vue";
import { defineComponent } from "vue";
import FrontPage from "./components/FrontPage";
import Menubar from "./components/Menubar.vue";
import AddBankje from "./components/AddBankje.vue";
import deleteBankje from "./components/deleteBankje.vue";
import { eventHub } from "./main";

const axios = require("axios");

export default defineComponent({
  name: "App",components: {
    IonApp,FrontPage,Menubar,IonContent,AddBankje,deleteBankje,data() {
    return {
      bankjes: null,dataReceived: false,showAddOverlay: false,showdeleteOverlay: false,};
  },mounted() {
    this.refreshDataFromServer();
    eventHub.on("startAdd",this.startAdd);
    eventHub.on("endAdd",this.endAdd);
    eventHub.on("startdelete",this.startDelete);
    eventHub.on("enddelete",this.endDelete);
  },methods: {
    refreshDataFromServer() {
      axios.get("http://localhost:3000/bankjes").then((responsE) => {
        this.bankjes = response.data;
        this.dataReceived = true;
      });
    },startAdd() {
      console.log("App.vue: Hit eventhandler voor startAdd");
      this.showAddOverlay = true;
    },endAdd() {
      console.log("App.vue: Hit eventhandler voor endAdd");
      this.showAddOverlay = false;
    },startdelete() {
      console.log("App.vue: Hit eventhandler voor startdelete");
      this.showdeleteOverlay = true;
    },enddelete() {
      console.log("App.vue: Hit eventhandler voor Enddelete");
      this.showdeleteOverlay = false;
    },});
</script>

后来补充： 我发现菜单项周围的 div 大约为 150x75 像素（此处为蓝色）：

解决方法

<add-bankje v-if="showAddOverlay"></add-bankje>
<delete-bankje v-if="showdeleteOverlay"></delete-bankje>

大佬总结

以上是大佬教程为你收集整理的svg 按钮对点击没有反应全部内容，希望文章能够帮你解决svg 按钮对点击没有反应所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。