问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

ElementPlus UI 中el-popover中内容循环出来的点击事件需要点击第二次才能触发？

头像
发条卢丶
    12813443
    广西柳州市

    在ElementPlus UI 中el-popover中内容循环出来的点击事件需要点击第二次才能触发？
    代码如下X)82AIENK@XWVZKA)U}Q[BF.png
    for循环出来的li点击需要第二次才触发 不是循环的点击一次就行
    补充(点击事件放在li上也不行，所以我才委托到UL上的)

    已解决。后期赋值的数据会出现这个问题，如果一开始定义的时候就赋值的话，就不会出现这个问题了。

    前端html
    阅读 2.1k
    avatarAI BotBETA

    在 ElementPlus 中，如果你遇到 el-popover 内的循环内容（如 li 元素）的点击事件需要点击两次才能触发的问题，这通常与事件委托或元素渲染的时机有关。以下是一些可能的解决方案和检查点：

    1. 确保事件委托正确设置

    如果你使用的是事件委托（即将事件监听器绑定到父元素如 ul 上，然后检查事件的目标元素），确保你的委托逻辑是正确的。事件委托的基本思想是监听父元素上的事件，然后通过事件对象 event.target 来判断实际触发事件的子元素。

    示例代码

    <template>
  <el-popover placement="bottom" width="200" v-model="visible">
    <ul @click="handleClick">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </el-popover>
  <el-button @click="togglePopover">Toggle Popover</el-button>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
  methods: {
    togglePopover() {
      this.visible = !this.visible;
    },
    handleClick(event) {
      if (event.target.tagName === 'LI') {
        console.log('Clicked LI', event.target.innerText);
        // 这里可以处理你的逻辑
      }
    },
  },
};
</script>

    2. 检查是否有其他事件处理函数干扰

    确保没有其他事件处理函数（如 el-popover 或 li 元素上的其他点击事件监听器）干扰了你的点击事件。有时候，多个事件监听器可能会相互冲突或影响事件的正常传播。

    3. 检查元素渲染时机

    如果 el-popover 是在某些异步操作（如 AJAX 请求）后渲染的，确保你的事件监听器是在 DOM 元素完全渲染后添加的。Vue 通常会自动处理这些问题，但在某些情况下（如使用 v-if 而不是 v-show 控制 el-popover 的显示时），可能需要特别注意。

    4. 使用 Vue 的 .native 修饰符（如果适用）

    在 Vue 2 中，如果你需要监听组件根元素的原生事件，可能需要使用 .native 修饰符。但在 Vue 3 中，这个修饰符已经被移除，因为组件的 $emit 和原生事件被更清晰地分离了。不过，对于 ElementPlus 这样的 UI 库，你通常不需要直接使用 .native，因为库已经为你处理好了这些事件。

    5. 检查 CSS 或其他样式问题

    有时候，CSS 样式（如 z-index、pointer-events 等）可能会影响到事件的触发。确保没有 CSS 规则阻止了点击事件的正常传播。

    结论

    根据你的问题描述，问题很可能与事件委托的实现或元素渲染的时机有关。检查上述点，并尝试调整你的代码以解决问题。如果问题仍然存在，你可能需要提供更多的代码细节以便进一步分析。

    1 个回答
    得票最新
    头像
    陟上晴明
      23.4k156591

      没能够复现OP你的问题，这是我的在线Demo 👉 Element Plus Playground
      图片.png
      或者OP可以提供一个可复现的Demo。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题