WeChatアプレットbindtapとcatchtapの違いの詳細な説明

1. イベントとは何ですか?

（１）イベントはビュー層からロジック層への通信手段である。

（２）イベントは、ユーザの行動をロジック層にフィードバックして処理することができる。

（３）イベントはコンポーネントにバインドすることができ、トリガーイベントに到達すると、ロジック層内の対応するイベント処理機能が実行されます。

（4）イベントオブジェクトは、ID、データセット、タッチなどの追加情報を保持できます。

2. イベントの使い方

（1）簡単に言えば、コンポーネントにイベントをバインドすることです。bindtapとcatchtapはどちらもクリックイベントに属します。バインド後、コンポーネントをクリックするとこの機能がトリガーされます。

（2）tapName関数は、関数呼び出しに関するコンテキスト情報を格納するパラメータイベントを受け入れます。

（３）ラベル要素

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> クリックしてください! </view>

（4）拘束イベント

ページ（{
    タップ名: 関数(イベント) {
        console.log(イベント)
    }
})

3. バインドタップとキャッチタップの違い

（1）類似点：まず、どちらもクリックイベント関数であり、クリックされるとトリガーされます。この機能では、それらは同じであり、区別する必要はありません。

（２）相違点：主な違いは、バインドタップは泡立ちがあり、キャッチタップは泡立たないことです。

4. ミニプログラム内のイベントは、バブリングイベントと非バブリングイベントに分けられます。

（１）この記事では、バブリングイベントタップ（指が触れてすぐに離れる、つまりクリックイベント）を例に、バインドイベントとキャッチイベントを区別します。

（２）bindtap？イベントバインディングはバブリングイベントが上向きにバブリングするのを妨げない

（３）キャッチタップ？イベントバインディングはバブリングイベントが上向きにバブリングするのを防ぐことができる

イベントのターゲットと現在のターゲットの違い

上記の wxml&&wxss コードを引き続き使用して、今回は js コードの print 値を変更します。

// js
  アウタータップFn(e) {
    console.log("外側の親要素がクリックされました =.=",e);
  },
  インナータップ関数(e) {
    console.log("私はクリックされた内部の子要素です =.=",e);
  },

ターゲットは、イベントをトリガーするソースコンポーネントに対応します。このコンポーネントは、アクションが実行される領域に応じて、子コンポーネントまたは親コンポーネントになる場合があります。そして、currentTarget は常にイベントがバインドされているコンポーネントに対応します。

5. 例

1. 3 つのビュークリックイベントがあり、すべてが bindtap を使用する場合、3 つのビューは階層的に含まれていますか?

<view id="outer" bindtap="out">
    外観
    <view id="middle" bindtap="middle">
        中間ビュー
        <view id="inner" bindtap="inner">
            内部ビュー
        </ビュー>
    </ビュー>
</ビュー>

2. js では、コードは対応するイベントのログを出力します。コードは次のとおりです。

出力:関数(e){
    console.log("--out バインドタップ クリック")
}, 中間: 関数 (e) {
    console.log("--middle bindtap クリック")
}, 内部: 関数 (e) {
    console.log("--inner bindtap クリック")
}

3. Bindtapの実行結果

ログを印刷するには、ビューをクリックします --> バインドタップをクリックして出力します
中央のビューをクリックすると、2 つのログが印刷されます --> 中央のバインドタップをクリック -- アウトバインドタップをクリック
新しいビューをクリックして 3 つのログを印刷します --> 内側のバインドタップをクリック - 中央のバインドタップをクリック - 外側のバインドタップをクリック
バインドタップは上向きの泡立ちを防げないので、内側の泡が最外層までクリックされていることがわかります。

4. 中間ビューのbindtapをcatchtapに変更するだけの場合

ログを印刷するには、アウトビューをクリックします --> アウトバインドタップをクリックします (上位要素がないため、バブルアップできません)
中央のビューをクリックしてログを印刷します --> 中央のバインドタップをクリックします (キャッチタップは上向きの泡立ちを防ぎます)
新しいビューをクリックして 2 つのログを印刷します --> 内側のバインドタップクリック -- 中央のバインドタップクリック (キャッチタップにより上向きの泡立ちが防止されます)

WeChatミニプログラムbindtapとcatchtapの違いについての詳細な説明はこれで終わりです。WeChatミニプログラムbindtapとcatchtapに関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: