特定の画像だけ右クリックの禁止を実装したい。

お世話になります。Javascript初心者です。

右クリックの禁止を練習しており、表示されたページの中に複数の画像が表示されており、その画像の src に `drink_example.com'と含まれていなかったら
画像の保存を禁止するため、右クリックを禁止する操作を Javascript で実装したいです。

現在は

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8<img src="drink_example.com.jpg">
9<img src="pet.jpg">
10<img src="drink_example.com.jpg">
11<img src="pet.jpg">
12<img src="drink_example.com.jpg">
13<img src="pet.jpg">
14
15<script src="main.js"></script>
16
17</body>
18</html>

javascript
1var img = document.images
2for (let i = 0; i < img.length; i++) {
3    console.log( img[i] );
4    var result = img[i].src.includes('drink_example.com');
5    if (result) {
6        console.log('保存可能');
7    }else{
8        // document.images[i].oncontextmenu = "return false;" <------ これではうまくいかない？
9        console.log('保存不可')
10    };
11
12}
13

という状態となっております。
このような分岐で、

oncontextmenu="return false;"

を右クリック禁止にする <img>タグに追加すればできそうなのですが、追加する方法がわからないのですが、どなたかご教示をお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1        // document.images[i].oncontextmenu = "return false;" <------ これではうまくいかない？

oncontextmenu プロパティに代入するのは、文字列ではなく関数です。
oncontextmenu 属性にセットするのは、文字列です。

ですので、以下のどちらかで動くはずです。

js
1        img[i].oncontextmenu = function() { return false; };
2        img[i].setAttribute('oncontextmenu', 'return false;');

動的に対象要素が増減する場合はそれぞれの要素のoncontextmenuをセットするのはたいへん手間なので、イベントのバブリングを利用した委譲を利用して以下のようにdocumentでイベントを捕まえるのが定石です。

js
1document.addEventListener('contextmenu', event => {
2  if (event.target.tagName == 'IMG' && event.target.src.includes(...))
3    event.preventDefault();
4});

古いイベントの書き方だと以下になります。

js
1document.oncontextmenu = function(event) {
2  if (event.target.tagName == 'IMG' && event.target.src.includes(...))
3    return false;
4};

投稿2021/06/02 00:39

編集2021/06/02 06:56

int32_t

総合スコア20997

nobita

2021/06/02 04:11

ありがとうございます！！動きました！同じような場合で、モーダルで表示した画像の場合も同じような処理をしたいのですが、モーダルで表示した画像を同じように取得する場合はどのようにしたらいいのでしょうか？

int32_t

2021/06/02 05:23

回答に追記しました。

nobita

2021/06/02 05:49

ありがとうございます。 event の部分に click　処理なら　clickと書き換えればよいのでしょうか？

nobita

2021/06/02 05:57

また、event.target.tagName == 'IMG'　の部分の 'IMG'は大文字での指定なのでしょうか？

int32_t

2021/06/02 06:06

「 click　処理」とはなんのことでしょうか? contextmenu の質問ですよね? > 大文字での指定なのでしょうか？そのへんは人に聞くより試してみたほうが早いですよ。イベントリスナの先頭に console.log(event.target.tagName); などを入れてあちこち右クリックしてみましょう。

nobita

2021/06/02 06:14

>「 click　処理」とはなんのことでしょうか? contextmenu の質問ですよね? はい、すみません。。モーダルウィンドウがクリックすることで開くので、そのクリック処理が必要なのかと思い質問させていただきました。クリックしたらモーダルが開くそしたら　ご教示いただいた処理が発火するといった流れかと思ったのですが、、、それとも event と書いておけばよしなに動いてくれるのでしょうか？ >console.log(event.target.tagName); などを入れてあちこち右クリックしてみましょう。なるほど！！そちらのコードで確認が取れるんですね！ありがとうございます！試してみます！

int32_t

2021/06/02 06:32

> クリック処理が必要なのかと思い必要ありません。回答の後半のコードが何をするものなのか理解できてないのだと思います。理解できないコードについては当てずっぽうで修正しようとせず、まずは自分で理解できるよう調べて、それでも理解できなかったらまた人に聞きましょう。

nobita

2021/06/02 12:16

ありがとうございます！！！そうですね！色々調べて勉強してみます！！ありがとうございました！！

行動規範の内容に同意します