js click 多次执行

let isListenerAdded = false;

function handleClick() {
    console.log('Clicked!');
}

function addClickListener() {
    if (!isListenerAdded) {
        document.getElementById('myButton').addEventListener('click', handleClick);
        isListenerAdded = true;
    }
}

// 在需要的时候调用 addClickListener
addClickListener();

document.getElementById('parentElement').addEventListener('click', function(event) {
    if (event.target.matches('.childElement')) {
        console.log('A child element was clicked!');
    }
});

import React, { useEffect } from 'react';

function MyComponent() {
    const handleClick = () => {
        console.log('Clicked!');
    };

    useEffect(() => {
        document.getElementById('myButton').addEventListener('click', handleClick);

        // 清理函数，在组件卸载时执行
        return () => {
            document.getElementById('myButton').removeEventListener('click', handleClick);
        };
    }, []); // 空依赖数组确保只运行一次

    return <button id="myButton">Click Me</button>;
}

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  },
  beforeUnmount() {
    // 如果需要手动移除事件监听器，可以在这里进行
  }
}
</script>