如何让元素点击事件仅在关联目标元素可见时生效？

针对你遇到的问题，有几种简单直接的修改方式，确保只有当目标MyLink元素可见时，点击card才会触发它的点击事件：

方法一：直接检查元素的可见状态 #

修改card的点击逻辑，在触发点击前先判断目标元素是否处于可见状态（display: none时元素不可见）：

模板修改： #

<div class="card" @click="handleCardClick">
  <!-- card内容 -->
</div>

脚本逻辑： #

methods: {
  handleCardClick() {
    // 注意：你的ref实际是viewDetailsLink，不是detailsLink，这里要修正引用
    const targetEl = this.$refs.viewDetailsLink?.$el;
    if (!targetEl) return;

    // 方式1：通过offsetParent判断（display:none时offsetParent为null）
    if (targetEl.offsetParent !== null) {
      targetEl.click();
    }

    // 方式2：通过计算样式判断display属性
    // const computedStyle = window.getComputedStyle(targetEl);
    // if (computedStyle.display !== 'none') {
    //   targetEl.click();
    // }
  }
}

方法二：结合媒体查询监听移动端状态 #

如果你的移动端断点是固定的，可以通过监听窗口变化，维护一个响应式变量来判断当前是否处于移动端，进而控制点击逻辑：

完整代码示例： #

<template>
  <div class="card" @click="handleCardClick">
    <!-- card内容 -->
    <div class="hidden-mobile">
      <MyLink :id="$id('view-details')" ref="viewDetailsLink"></MyLink>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false
    };
  },
  mounted() {
    this.checkDeviceType();
    // 监听窗口大小变化，实时更新设备状态
    window.addEventListener('resize', this.checkDeviceType);
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('resize', this.checkDeviceType);
  },
  methods: {
    checkDeviceType() {
      // 替换成你实际的移动端断点，比如768px以下为移动端
      this.isMobile = window.matchMedia('(max-width: 767px)').matches;
    },
    handleCardClick() {
      // 非移动端时才触发链接点击
      if (!this.isMobile) {
        this.$refs.viewDetailsLink?.$el.click();
      }
    }
  }
};
</script>

方法三：模板内直接条件判断（简化版） #

如果逻辑简单，也可以直接在模板中加入条件判断（适合Vue 3，支持可选链）：

<div class="card" @click="!isMobile && $refs.viewDetailsLink?.$el.click()">
  <!-- card内容 -->
</div>

注意事项： #

• 你的代码中$refs.detailsLink是错误的，实际元素的ref是viewDetailsLink，务必修正这个引用，否则会找不到目标元素。

内容的提问来源于stack exchange，提问作者mcool