マウスクリックイベントを防ぐ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 はそれをサポートしていません。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 を使用してマウスホバー時に境界線を回転する

CSS3 を使用して 8 セットのクールなマウスオーバー画像アニメーションを実装する

CSS3 を使用してマウスホバーリングを実装して拡大表示するコンテンツ

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