如何检测列表元素上的点击？

const listItems = document.querySelectorAll('.list-item');
listItems.forEach(item => {
  item.addEventListener('click', () => {
    // 处理点击操作
  });
});

$('.list-item').click(function() {
  // 处理点击操作
});

<template>
  <div>
    <ul>
      <li v-for="item in list" @click="handleItemClick(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    };
  },
  methods: {
    handleItemClick(item) {
      // 处理点击操作
    }
  }
};
</script>

import React from 'react';

class List extends React.Component {
  handleItemClick(item) {
    // 处理点击操作
  }

  render() {
    return (
      <div>
        <ul>
          {this.props.list.map(item => (
            <li key={item} onClick={() => this.handleItemClick(item)}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default List;