JavaScript ページ全体を右クリック禁止にして、input textなどでは許可したい場合

Question

ページ全体を右クリック禁止にします
input text、textarea上では右クリック禁止を解除したい場合どうしたらいいでしょうか？
※アロー関数はよくわかりません

<script>
window.onload=function(){
document.body.addEventListener('contextmenu',  function(e) {
e.preventDefault();
});
Array.from(document.querySelectorAll('input[type='text'],textarea'), i => {
i.addEventListener('focus',  function(e) {
document.body.removeEventListener('contextmenu',  function(e) {});
});
i.addEventListener('blur',  function(e) {
document.body.addEventListener('contextmenu',  function(e) {
e.preventDefault();
});
});
});
}
</script>
<input type="text" id="outbox">
<textarea id="textarea"></textarea>

Answer 1

<script>
document.addEventListener('contextmenu',  function(e) {
  if(!["INPUT","SELECT","TEXTAREA"].includes(e.target.nodeName)){
    e.preventDefault();
  }
});

</script>
<input type="text">
<input type="checkbox">
<input type="button" value="button">
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<textarea id="textarea"></textarea>

Comments

[退会済みユーザー]

ありがとうございます(* ˊᵕˋㅅ)

Answer 2

document か document.body の contextmenu イベントリスナを登録して、イベントターゲットがテキストinputでもtextareaでもない場合だけ preventDefault() します。

Comments

[退会済みユーザー]

すみません、無知で。。
＞document か document.body の contextmenu イベントリスナを登録して

これはわかるのですが、
イベントターゲットがテキストinputでもtextareaでもない場合だけ preventDefault() します。
これがよくわかりません。。。

[退会済みユーザー]

<script>
window.onload=function(){
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
Array.from(document.querySelectorAll("input[type='text'],textarea"), i => {
??
});
}
</script>
<input type="text" id="outbox">
<textarea id="textarea"></textarea>

[int32_t]

質問文のコードの最初のリスナを例にすると、
* e.target に、右クリックされた要素が入ります
* 要素.matches(セレクタ) で、要素がCSSセレクタにマッチするかどうかをチェックできます。

https://developer.mozilla.org/ja/docs/Web/API/Element/matches

[退会済みユーザー]

エラーが出てしまいました

<script>
window.onload=function(){
document.addEventListener('contextmenu', function(e) {
t=e.target;
if (!t.match(/input/)) {
if (!t.match(/textarea/)) {
e.preventDefault();
}
}
});
}
</script>
<input type="text" id="outbox">
<textarea id="textarea"></textarea>

[int32_t]

惜しいです!
if (!t.matches('input[type=text], textarea")) {

[退会済みユーザー]

Uncaught SyntaxError: '' string literal contains an unescaped line break
というエラーで動きません

<script>
window.onload=function(){
document.addEventListener('contextmenu', function(e) {
t=e.target;
if (!t.matches('input[type=text], textarea")) {
e.preventDefault();
}
});
}
</script>
<input type="text" id="outbox">
<textarea id="textarea"></textarea>

[int32_t]

私のコメントに間違いがあったとはいえ、それぐらいの文法エラーはご自身で直せませんか?

[退会済みユーザー]

if (!t.matches('input[type=text], textarea")) {
↓
if (!t.matches("input[type=text], textarea")) {
にしたら動きました！

[int32_t]

よかったです ????