小程序button按钮误触发问题

最新推荐文章于 2024-08-18 22:06:00 发布

原创最新推荐文章于 2024-08-18 22:06:00 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #小程序 #html #javascript #html5

小程序开发技巧专栏收录该内容

21 篇文章

订阅专栏

博主在开发小程序时遇到一个问题，点击view标签意外触发了分享按钮的事件。经过排查，发现是button标签上的position属性导致的，删除该属性后问题解决。这可能是个官方尚未修复的bug。

记一个奇葩问题

最近做小程序碰到一个神奇的现象，页面上定义了一个按钮触发分享，
另外一个同级view标签处理别的事件。
但是点击view标签的时候却触发了分享操作。

wxml

<view class="oprator flex">
  <button class="share-box" open-type="share">
      <image class="icon" src="/image/school-share.png" mode="aspectFill" />
      <text>分享</text>
    </button>
  <view class="delivery-box" bindtap="showPopup">
    <image class="icon" src="/image/delivery.png" mode="aspectFill" />
    <text>传递薪火</text>
  </view>
</view>

scss

.share-box {
  color: #14cc76;
  width: 50%;
  text-align: center;
  background: none;
  border: 0;
  position: unset;

  .icon {
    width: 30rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
  .xhzx-form-button text {
    color: #14cc76;
    font-size: 32rpx;
  }
}

.delivery-box {
  color: #fe7141;
  width: 50%;
  text-align: center;

  .icon {
    width: 24rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}