ホームページ > 記事 > ウェブフロントエンド > マウスクリックイベントを防ぐCSSコードについて

マウスクリックイベントを防ぐCSSコードについて

不言オリジナル: 2018-06-28 09:56:433297ブラウズ

この記事では、純粋な 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 サイトをご覧ください。

マウスクリックイベントを防ぐCSSコードについて

関連記事