CSSでdivをクリック不可に設定する方法

div をクリック不可に設定する Css メソッド: 1. 「event.preventDefault()」メソッドを通じてイベントのデフォルトのアクションをキャンセルします; 2. 「event.preventDefault()」メソッドを通じてイベントの伝播を停止します。 stopPropagation()」メソッド。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

推奨: css ビデオ チュートリアル

CSS で div をクリックできないように設定するにはどうすればよいですか?

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

event.preventDefault()

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

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

event.stopPropagation()

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

これら 2 つは、JS でイベントをキャンセルするためによく使用されるメソッドですが、実際には、純粋な CSS であるポインター イベントを使用してイベント応答をキャンセルする別の方法があり、これはより簡単に使用できます。

#ユーザーのクリック操作が影響を及ぼさないようにする

デフォルトのマウス ポインターを表示しないようにする

CSS でのホバーおよびアクティブ状態の変化によるイベントのトリガーを防止する

JavaScript クリック アクションによってイベントがトリガーされるのを防止します
css div をクリックできないように設定するには、次のコードを使用できます:

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

このメソッドは明らかに js コードより柔軟ですが、残念ながら ie9 はそうではありません。それをサポートします。

以上がCSSでdivをクリック不可に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。