純粋な CSS を使用してマウス クリック イベントを無効にするサンプル コード

この記事では、純粋な CSS を使用してマウス クリック イベントを無効にする方法を紹介します。必要に応じて参照してください。

JavaScript には preventDefault メソッドがあり、イベントのデフォルトのアクションをキャンセルするために使用できます。リンクを開かない、テキストを選択する、ドラッグ アンド ドロップするなど。

コードをコピーします

コードは次のとおりです:

event.preventDefault()

このメソッドは、イベントに関連付けられたデフォルトのアクション (そのようなアクションが存在する場合) を実行しないように Web ブラウザーに通知します。たとえば、type 属性が "submit" の場合、イベント伝播のどの段階でも任意のイベント ハンドラーを呼び出すことができ、このメソッドを呼び出すことでフォームの送信を防ぐことができます。 Event オブジェクトの cancelable プロパティが fasle の場合、デフォルトのアクションが存在しないか、デフォルトのアクションを防止できないことに注意してください。どちらの場合も、このメソッドを呼び出しても効果はありません。

このメソッドは、現在の要素のブラウザーのデフォルト動作を防ぐことができますが、親とドキュメントによるイベントへの応答は妨げられません。イベントを完全にキャンセルしたい場合は、stopPropagation

コードをコピーします

コードは次のとおりです:

event.stopPropagation()

このメソッドはイベントの伝播を停止し、イベントがディスパッチされないようにします。他の Document ノードに。イベント伝播のどの段階でも呼び出すことができます。このメソッドは、同じ Document ノード上の他のイベント ハンドラーの呼び出しを防ぐことはできませんが、イベントが他のノードにディスパッチされることを防ぐことができることに注意してください。

これら 2 つは、JS でイベントをキャンセルするためによく使用されるメソッドですが、実際には、純粋な CSS を使用してイベント応答をキャンセルする別の方法、pointer-events があり、これを使用すると次のことが可能です。

1 、ユーザーのクリック アクションによる効果の生成を防止します

2. デフォルトのマウス ポインターの表示を防止します

3. CSS のホバーおよびアクティブ状態の変化によってイベントがトリガーされるのを防止します

4. JavaScript のクリック アクションによってトリガーされるイベントを防止します

たとえば、次のとおりです。 CSS には無効なボタンをグレー表示にする効果があります

コードをコピーします

コードは次のとおりです:

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

このメソッドは明らかに js コードよりも柔軟ですが、残念ながら IE9 はそれをサポートしていません。以上がこの記事の全内容ですので、皆様の学習や仕事のお役に立てれば幸いです。

関連おすすめ:

CSSテキストのフォントカラー設定方法(CSSカラー)

以上が純粋な CSS を使用してマウス クリック イベントを無効にするサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。