我的目標是當我點選newbutton時，在自定義的areaDiv新增一次按鈕；
寫死的狀態下是可以做到只新增一次；
但後續想新增text、label...所以改成用參數傳遞。
發現無法取消Listener，請各大大幫我看一下出了甚麼問題？

原本程式碼：

newButton.addEventListener('click', function () {
		if (!isDrawing) {
			startX = 0;
			startY = 0;
			isDrawing = true;
			areaDiv.addEventListener('mousedown', startSelection);
		}
	});
	function startSelection(event) {
		startX = event.clientX - areaDiv.offsetLeft;
		startY = event.clientY - areaDiv.offsetTop;
		isDrawing = true;
		areaDiv.addEventListener('mousemove', updateSelection);
		areaDiv.addEventListener('mouseup', createComponent);
	}
function createComponent(event) {
		if (isDrawing) {
			var currentX = event.clientX - areaDiv.offsetLeft;
			var currentY = event.clientY - areaDiv.offsetTop;
			var width = Math.abs(currentX - startX);
			var height = Math.abs(currentY - startY);
			var left = Math.min(startX, currentX);
			var top = Math.min(startY, currentY);

			var newButton = document.createElement('button');
			newButton.innerText = 'New Button';
			newButton.style.position = 'absolute';
			newButton.style.left = left + 'px';
			newButton.style.top= top + 'px';
			newButton.style.width = width + 'px';
			newButton.style.height = height + 'px';
			areaDiv.appendChild(newButton);

			isDrawing = false;
			areaDiv.removeEventListener('mousemove', updateSelection);
			areaDiv.removeEventListener('mouseup', createComponent);
			areaDiv.removeEventListener('mousedown', startSelection);
		}
	}

下面這是AI推薦寫法。
傳遞參數寫法：

	newButton.addEventListener('click', function () {
		if (!isDrawing) {
			startX = 0;
			startY = 0;
			isDrawing = true;
			areaDiv.addEventListener('mousedown', function(event) {
				startSelection(event, 'button');
			});
		}
	});

	function startSelection(event, newcomponentType) {
		startX = event.clientX - areaDiv.offsetLeft;
		startY = event.clientY - areaDiv.offsetTop;
		isDrawing = true;
		areaDiv.addEventListener('mousemove', updateSelection);
		areaDiv.addEventListener('mouseup', function(event) {
			createComponent(event, newcomponentType);
		});
	}
function createComponent(event, newcomponentType) {
		if (isDrawing) {
			var currentX = event.clientX - areaDiv.offsetLeft;
			var currentY = event.clientY - areaDiv.offsetTop;
			var width = Math.abs(currentX - startX);
			var height = Math.abs(currentY - startY);
			var left = Math.min(startX, currentX);
			var top = Math.min(startY, currentY);

			if (newcomponentType === 'button') {
				var newButton = document.createElement('button');
				newButton.innerText = 'New Button';
				newButton.style.position = 'absolute';
				newButton.style.left = left + 'px';
				newButton.style.top = top + 'px';
				newButton.style.width = width + 'px';
				newButton.style.height = height + 'px';
				areaDiv.appendChild(newButton);
			}
			isDrawing = false;
			areaDiv.removeEventListener('mouseup', createComponent);
			areaDiv.removeEventListener('mousemove', updateSelection);
			areaDiv.removeEventListener('mousedown', startSelection);
		}
	}

最後面有嘗試過下列寫法，一樣是無法取消

			isDrawing = false;
			areaDiv.removeEventListener('mousemove', updateSelection);
			areaDiv.removeEventListener('mouseup', function(event) {
				createComponent(event, newcomponentType);
			});
			areaDiv.removeEventListener('mousedown', function(event) {
				startSelection(event, newcomponentType);
			});