uniapp解决点击穿透问题总结

Front思2026-01-16 10:45

摘要：

今天uniapp写详情页的时候遇到点击跳转详情与点击跳转导航既然穿透出去了，点击导航跳转详情页了！

bash 复制代码

<view class="card_item" v-for="item in status" :key="item.value">
    <view @tap="toDetails(item)">
        <view class="d-f">
            <text class="f32 fb mb10">XXX</text>
            <uv-icon @tap="handlePhoneClick($event)" size="20" class="ml30 mr30" name="/static/phone_icon.png"></uv-icon>
            <uv-icon @tap="handleNavigationClick($event)" size="20" name="/static/nav_icon.png"></uv-icon>
        </view>
     </view> 
</view>

typescript 复制代码

<script setup>
  import { ref } from "vue";
  const toDetails = (t) => {
    const now = Date.now();
    if (now - lastActionTime < 500) { // 防止快速连续点击
      return;
    }
    lastActionTime = now;
    
    uni.navigateTo({
      url: `/details/index1?id=${t.type}`,
    });
  };

  const toPhoneCall = () => {
    const now = Date.now();
    if (now - lastActionTime < 500) { // 防止快速连续点击
      return;
    }
    lastActionTime = now;
    uni.makePhoneCall({
      phoneNumber: '123456'
    });
  }

  const toNavigation = (t) => {
    const now = Date.now();
    if (now - lastActionTime < 500) { // 防止快速连续点击
      return;
    }
    lastActionTime = now;
    
    uni.navigateTo({
      url: `/navigation/index?id=123`,
    });
  };

  const handlePhoneClick = (event) => {
    event?.preventDefault?.();
    event?.stopPropagation?.();
    toPhoneCall();
  };

  const handleNavigationClick = (event) => {
    event?.preventDefault?.();
    event?.stopPropagation?.();
    toNavigation();
  };
</script>

一开始使用@click，穿透是绝对存在的！

后来添加@click.stop阻止事件冒泡，还是不行！

手动阻止冒泡还是不行！

bash 复制代码

const toNavigation = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  uni.navigateTo({
    url: `/navigation/index?id=123`,
  });
};

@click.prevent.stop还是不行！

CSS 防止事件穿透还是不行！

css 复制代码

.card_info {
  pointer-events: none; // 禁用整个区域的指针事件
  
  .d-f { // 只对需要交互的元素启用指针事件
    pointer-events: auto;
  }
}

.d-f {
  pointer-events: auto; // 确保图标可以响应点击
}

最终使用 @tap 替代 @click - 在移动端应用中，@tap 通常是更好的选择

添加防重击措施 - 通过 lastActionTime 防止快速连续点击

安全的事件处理 - 使用 event?.preventDefault?.() 安全链式调用

移除了可能导致冲突的 stop 修饰符