clickイベント内でのclickイベントが思うような動作をしない

前提

Javascriptを使用してWebサイトを構築しています。
clickイベントでボタンを押下後、さらにマウスの左右のクリックの判定によってUIに変化を加える処理中に思うような動作を得られませんでした。
下記ソースコードはその一例です。

実現したいこと

1.[クリック]ボタン押下→"色変化"出力(黒色)→マウス左クリック時には赤色に変化し、右クリック時には青色に変化する
2.赤/青色の変化は一度変化したら繰り返さない

発生している問題

[クリック]ボタン押下時に、左クリックの判定も入ってしまうため、赤色への変化がせず困っております。
どのように改善すれば上記の[実現したいこと]ができるでしょうか。ご教授いただければ幸いです。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8  </head>
9  <body>
10    <div id="container">
11      <p1>右：青　 左：赤</p1>
12      <button id="btn">クリック</button>
13    </div>
14    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
15    <script>
16      let btn = document.getElementById('btn');
17      btn.onclick = function () {
18        console.log('クリック！！');
19        let p = document.createElement('p');
20        p.innerHTML = '色変化';
21        btn.after(p);
22
23        $('html').one('click contextmenu', function (e) {
24          console.log(e.which);
25          if (e.which == 1) {
26            //左クリック
27            console.log('左クリック');
28            if (!e.target.closest('#btn')) {
29              p.style.color = 'red';
30            }
31          } else if (e.which == 3) {
32            //右クリック
33            console.log('右クリック');
34            p.style.color = 'blue';
35          }
36        });
37      };
38    </script>
39  </body>
40</html>

dameo

2023/01/23 22:02

jQuery側に寄せていっぱい変えました。 // https://api.jquery.com/on/ $("#btn").on("click contextmenu", function (e) { // https://api.jquery.com/jQuery/#creating-new-elements const p = $("<p>色変化</p>"); // https://api.jquery.com/after/ $("#btn").after(p); // https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/button switch (e.button) { case 0: p.css("color", "red"); break; case 2: p.css("color", "blue"); // https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault e.preventDefault(); break; } });

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

回答2件

btn.onclick = function () { これを btn.addEventListener('click', function(e) { ... }); にして、中で e.stopPropagation() するのがいいんじゃないでしょうか。

すべてイベント委譲で処理してしまったほうが簡単な気がします。つまり、

js
1let p = null;
2$('html').on('click contextmenu', function (e) {
3  if (e.type == 'click' && e.target.closest('#btn')) {
4    console.log('クリック！！');
5    p = document.createElement('p');
6    p.textContent = '色変化';
7    btn.after(p);
8    return;
9  }
10  if (p) {
11    console.log(e.which);
12    if (e.which == 1) {
13      console.log('左クリック');
14      p.style.color = 'red';
15    } else if (e.which == 3) {
16      console.log('右クリック');
17      p.style.color = 'blue';
18    }
19    p = null;
20  }
21});

投稿2023/01/23 22:01

編集2023/01/24 00:19

int32_t

総合スコア20884

ベストアンサー

フラグで管理したほうがよいかもしれません

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let flg=false;
4  const p = Object.assign(document.createElement('p'),{textContent:'色変化'});
5  btn.addEventListener('click',e=>{
6    e.stopPropagation();
7    btn.disabled=true;
8    console.log('クリック！！');
9    btn.after(p);
10    flg=true;
11  },false);
12  document.addEventListener('click',e=>{
13    e.preventDefault();
14    if(flg){
15      console.log('左クリック');
16      p.style.color = 'red';
17      flg=false;
18    }
19  });
20  document.addEventListener('contextmenu',e=>{
21    e.preventDefault();
22    if(flg){
23      console.log('右クリック');
24      p.style.color = 'blue';
25      flg=false;
26    }
27  });
28});
29</script>
30<div id="container">
31<p>左：赤/右：青</p>
32<button id="btn">クリック</button>
33</div>