画像のコピー防止といっても、基本的にスマホやPCに表示されている時点で、ブラウザに保存されており、しかもキャプチャでも撮ってしまえば、閲覧者は同じ画像を使うことができます。
ですので、画像のコピー防止は根本的に出来ないかことを念頭に、本サンプルを参照してください。
ここでは、JSで右クリックの表示をオフにする機能と、画像が押されたらマウスの操作をオフにする機能、画像でマウスダウンしたらマウスダウン自体のイベントを無効にする機能の3つを比較します。
普通の画像
右クリック、ドラッグ防止の画像 その1
JSで、クリックされてもcontextmenuを無効にした場合
右クリック、ドラッグ防止の画像 その2
JSで、contextmenuを無効とCSSでpointer-eventsを無効。
右クリック、ドラッグ防止の画像 その3
JSでクリックのタイミングでpreventDefaultにした場合