vue2 三个 div 点击空白区域不执行函数 点击文字才执行函数

在Vue.js 2中，如果你想要创建一个包含三个`<div>`元素，并且只有点击文字部分才会触发某个函数，你可以通过监听事件冒泡（event bubbling）来实现。首先，给每个`<div>`添加一个共同的`click`事件处理程序，然后在该处理程序内部检查事件的目标元素是否是你想要处理的文字。

这是一个简单的例子：

<div v-for="(item, index) in items" @click="handleClick($event, index)">
  <span>{{ item.text }}</span>
  <div class="non-text">非文字区域</div>
</div>

<script>
export default {
  data() {
    return {
      items: [
        { text: '点击我' },
        { text: '这是另一个' },
        { text: '点击这里' }
      ]
    };
  },
  methods: {
    handleClick(event, index) {
      if (event.target.tagName !== 'SPAN') {
        // 如果点击的是非文字部分，阻止默认行为并返回
        event.stopPropagation();
        return;
      }

      // 如果点击的是文字部分，执行你需要的操作
      console.log(`点击了第${index + 1}个元素`);
    }
  }
};

在这个示例中，当点击任何一个`<div>`内的`<span>`标签以外的区域时，`event.stopPropagation()`会被调用，防止事件继续向上冒泡到父元素，因此函数不会被执行。只有当点击`<span>`标签时，才会执行`handleClick`方法。