クリック イベントは親要素に委任されます。スクロールビューは複数のループ バインディングを削減します。
クリック イベントのデータセットを通じてどの子要素がクリックされたかが判断されます。
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オープンコミュニティ