JavaScript 「event.buttons」の意味

投稿日：2020年2月12日

Kindle unlimitedで「これ1冊でゼロから学べる Webプログラミング超入門　ーHTML,CSS,JavaScript,PHPをまるごとマスター」という本を読んでいます。

書籍の中のこの部分でハマりました。

2.Javascriptの基本を覚えよう
3-1.DOMを操作しよう

次のコードにより、JavascriptでHTML要素を追加したり、
削除したりできるいう説明があります。

		switch (event.buttons){
		case 1:
			var w = event.clientX;
			var h = event.clientY;
			var obj = document.createElement('p');
			obj.name = 'create element'
			obj.className = 'newelement';
			obj.textContent = "No, " + count++;
			event.target.appendChild(obj);
			break;
		case 3:
			if (event.target.name == 'create element'){
				var parent = event.target.parentElement;
				parent.removeChild(event.target);
			}
			break;
		}
		event.preventDefault();

switch (event.buttons){

case 1:

var w = event.clientX;

var h = event.clientY;

var obj = document.createElement('p');

obj.name = 'create element'

obj.className = 'newelement';

obj.textContent = "No, " + count++;

event.target.appendChild(obj);

break;

case 3:

if (event.target.name == 'create element'){

var parent = event.target.parentElement;

parent.removeChild(event.target);

}

break;

}

event.preventDefault();

クリックすると要素が追加されることはわかるのですが、
どうすれば削除されるのかが理解できませんでした。
書籍には次の用に書いてあります。

…parentElementで取り出した要素の「removeChild」を使って、
イベントの発生した要素を削除します。
これで、画面からクリックした要素が取り除かれます。

なので、クリックしたのですが、どんどん要素が追加されていきます。

いろいろ試してみたところ、event.buttonsの意味がわかりました。

Javascript 「event.buttons」の意味

event.buttons ==1 ：左クリック
event.buttons ==2 ：右クリック
event.buttons ==3 ：右と左を同時にクリック
event.buttons ==4 ：マウスの真ん中のボタン