指示の指示

不要なクリックやタッチ操作を防ぐには、ポインター イベントを使用します。

重なり合う要素やホバー遷移を含む配置は、意図しないマウス操作をアクティブにし、Web サイトの訪問者のエクスペリエンスを低下させることがあります。ポインティング キューを使用すると、要素のクリックまたはタッチ操作を非アクティブにして、視覚のみの要素が他の要素の操作を妨げないようにすることができます。

このチュートリアルでは、次のことを学びます。 

  1. 指差しの手がかりの使い方
  2. よくある質問

指差しの手がかりの使い方

ポインティング キューを利用すると、意図したコンポーネントのみがクリックやタッチ アクションに反応するようにすることができます。これは、重なり合うコンポーネント (テキストやアイコンが重ねられた背景ビデオなど) や、ホバー シフトやツールヒントのあるデザインでのアクションを管理するのに役立ちます。

Webflow では、指示キューには 2 つの選択肢があります。 

  • 自動 — すべてのコンポーネントのデフォルト設定で、標準的なクリックとタッチ操作が可能
  • なし — すべてのポインティングキュー(クリックやタッチ操作など)を禁止します  
役立つヒント: 設定できます ポインティングなし デザインのレイアウトを変更せずに、トラブルシューティングやデザインの変更を行うために、クリックとタッチのアクションを一時的に無効にします。

アクションを無効にするためのポインティングキューの設定方法

コンポーネント上のアクションを無効にするようにポインティング キューを構成するには: 

  1. キャンバス上のコンポーネントを選択する
  2. に行く スタイルパネル > 効果 > イベント
  3. 調整する ポインティングなし 

コンポーネント ポインティング に設定 なしクリックなしナビゲーター パネルの「 」記号をクリックします。

述べる: コンポーネント ポインティング に設定 なし キーボードの連続ナビゲーションでフォーカスを受け取ることができます。 タブ 鍵。 

重要な: コンポーネント ポインティング に設定 なし キャンバス上では表示されていますが、選択できません。 ポインティング に設定 なしナビゲーター パネルから実行できます。

子孫コンポーネント コンポーネントの ポインティング に設定 なし ポインティングキューの設定を継承し、 ないクリックなし” シンボルをクリックします。継承されたポインティングキュー設定をオーバーライドして子コンポーネントをインタラクティブにしたい場合は、ナビゲーターパネルで子コンポーネントを選択し、 スタイルパネル > 効果 > イベント、調整する ポインティング自動.

述べる: 調整することでコンポーネントのアクションを非アクティブ化する場合 ポインティングなし その後、そのコンポーネントにマウス トリガー (マウス クリック (タップ)、マウス ホバーなど) を含むアクションをアタッチすると、アクションはトリガーされません。

よくある質問

オーバーレイされたコンポーネントが上にあるにもかかわらずクリックできないのはなぜですか? 

オーバーレイされたコンポーネントのポイントを「なし」に設定して非インタラクティブにすることもできます。調整 ポインティング自動 この動作が意図的でない場合にアクションを有効にします。

「Pointing to None」を設定しましたが、望ましくないアクションがまだ発生します。なぜでしょうか? 

ページ上の他のコンポーネント、特に親コンポーネントまたは重複コンポーネントが、このコンポーネントのアクションに影響を与える可能性があります。関連するすべてのコンポーネントに対して、ポインティング キューが適切に構成されていることを確認してください。

ユアン・マック