アプレット イベントは親要素のスクロールビューに委任されますが、子要素のビューのバインドされたデータセット値を取得できません

クリック イベントは親要素に委任されます。スクロールビューは複数のループ バインディングを削減します。
クリック イベントのデータセットを通じてどの子要素がクリックされたかが判断されます。

e.target または e.currentTarget がよく見られます。
簡単に言うと、currentTarget は現在のオブジェクトであり、target はオブジェクト全体 (子要素を含む) です。
したがって、単一のコンポーネントをクリックすると、 currentTarget を使用してそのデータを直接取得できますが、コンポーネントがレイヤーにラップされており、イベントが親要素にあり、データが子要素にある場合は、次を使用する必要があります。目標


質問:

ただし、スクロールビューでは、第 1 レベルのサブ要素ビューにバインドされている data-xxx 属性を取得できません。

解決策:
CSS の pointer-events 属性を使用します
pointer-events: none; // 要素はクリック イベントをトリガーせず、バブルダウンします

//wxml

.title,.money, .second {
  pointer-events:none;
}

<scroll-view class="left" hidden="{
   
   {!leftType}}" bindtap="toDetail" data-left>
        <view wx:for="{
   
   {lostList.data}}" wx:for-item="pay"  class="pay-list-item" data-refno="{
   
   {pay.REFNO}}">
            <text class="title" data-count>丢失数量:{
   
   {pay.Count}}</text>
            <view class="money">
                <text class="{
   
   {pay.Status=='取消'?'cl89':''}}" style="point-event:none">- {
   
   {pay.Amount}}</text>
            <view class="flex_row second" >
                <text class="time">{
   
   {pay.Time}}</text>
                <text class="pay {
   
   {pay.Status=='取消'?'cl89':'cl50'}}">{
   
   {pay.Status}}</text>
            </view>
        </view>
</scroll-view>

 このクリック イベント bindingtap='toDetal' では、data-refno データセットを取得できます。

 .title,.money, .sec {   ポインタイベント: なし; }

 効果: このサブビューのどこをクリックしても、refno を取得できます。

 

参照リンク付きのコメント:

アプレットではイベント委任が使用されています。サブレベルに複数の要素がある場合、データセット内の属性をクリックして空にしますか? | WeChatオープンコミュニティ

おすすめ

転載: blog.csdn.net/LlanyW/article/details/131561422