クリックでテキストボックスのフォーカスを移動させる動作が重い(Edgeのみ)

Question

閲覧ありがとうございます。
下記の問題についてご教示いただきたく思います。

前提

• Canvas内で図形を作成すると、それに対応したテキストボックス3つとチェックボックスが1つをTable内に生成するJavaScriptを作成
• テキストボックスとチェックボックスはそれぞれInputタグで作成
• ソース内にEventListenerを8個作成済

発生している問題・実現したいこと

テキストボックスを連続で選択した際、カーソルの移動に2秒弱時間がかかっており、この遅延をなくしたいのですが、原因・対処法がわかりません。
例えば、1秒にテキストボックス1→テキストボックス2→テキストボックス3を順にクリックすると、
テキストボックス3をクリック後でもテキストボックス1にカーソルがあったまま2秒程動作が停止し、
その後テキストボックス3にカーソルが移動しています。
図形が3つ程度の時はカーソルの移動はスムーズですが、8つ程作ると上記の現象が起きます。
イベントリスナーを複数設置しているため、そこに原因があるのかとも思いましたが、原因が突き止められずにいます。

試したこと

• Tabキーでのカーソル移動は遅延なし(クリックでのカーソル移動時のみ遅延発生)
• Chromeでの実行時はカーソル移動に遅延なし
• Edgeの開発者ツールでパフォーマンスを確認すると、DOMイベント(click)で1.8秒かかっている
• DOMイベント内で以下のものが多く呼び出されており、Inputタグの数に比例して多くなる

getBoundingClientRect()
scrollLeft
scrollTop

補足情報（FW/ツールのバージョンなど）

Microsoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18363

ソースコード

<table class="table1">
    <tr>
        <td class="formTypeImage">
            <div class="canvasDiv">
                <canvas class="imageCanvas" id="imageCanvas"></canvas>        
            </div>
        </td>
        <td class="formTypeData">
            <table class="dataList" id="dataList">
                <thead class="dataListHead"></thead>
                <tbody class="dataListBody"></tbody>
                <!-- 表出力はJSにて実施 -->
            </table>
        </td>
    </tr>
</table>

// drawFieldTableBody
// テーブルボディの表示項目を描画

function drawFieldTableBody(data, dispList) {
	var tableBody = document.getElementById("dataList").tBodies.item(0);
	for(let i = 0; i < data.length; i++){
		addTableRow(tableBody, data[i], dispList, i);
	}
}

// addTableRow
// テーブルに行を追加
function addTableRow(table, rowData, dispList, num){
	var row = table.insertRow(-1);
	row.id = OBJ_NAME + num;

	for(let i = 0; i < dispList.length; i++){
		var cell = row.insertCell(-1);
		cell.className = dispList[i].className;
		cell.innerHTML = getHTML(dispList[i], rowData, num);
		if(dispList[i]['formType'] == 'checkbox'){
			var checkbox_id = dispList[i]["name"] + "_" + num;
			document.getElementById(checkbox_id).value = getCheckboxValue(checkbox_id);
		}
	}
}

// getHTML
// HTMLを生成
function getHTML(format, data, num){

	var html = "";
	html += "<";
	html += getFormTypeHTML(format["formType"]) + " ";
	html += "class=" + format["className"].replace("ThTd", "") + " ";
	if(format['formType'] == 'checkbox'){
		if(data['checkbox']==1){
			html += "checked" + " ";
		}
		html += "onchange=" + "setCheckboxValue(this)" + " ";
		html += "name=" + format["name"] + "_" + num + " ";
	} else {
		html += "value='" + data[format["name"]] + "'" + " ";
		html += "name=" + format["name"] + " ";
	}
	html += "id=" + format["name"] + "_" + num + " ";
	if(format['title'] != ''){
		html += "title=" + format["title"] + " ";
	}
	html += "form='register'" + " ";
	html += "maxlength=" + format["maxlength"] + " ";
	html += "pattern=" + format["pattern"] + " ";
	html += "autocomplete='off'" + " ";
	html += ">";

	// formTypeがselectの場合はoptionの記述を追加
	html += getSelectHTML(format, data);

	return html;
}

// getFormTypeHTML
// フォームのタイプごとのHTMLを生成
function getFormTypeHTML(formType){
	var html = "";
	switch(formType){
		case "text":
			html = "input type='text'";
			break;
		case "checkbox":
			html = "input type='checkbox'";
			break;
		case "select":
			html = "select";
			break;
	}
	return html;
}

// getSelectHTML
// プルダウンのHTMLを生成
function getSelectHTML(format, data){
	if(format["formType"] != "select"){
		return "";
	}

	var fieldType = data["field_type"];

	var html = "";
	//活字数字のみ設定
	if (fieldType == 0 || fieldType == 2) {
		//change
		html += "<option value='0' selected>OPTION1</option>";
	} else {
		html += "<option value='0' >OPTION1</option>";
	}

	//活字全般設定
	if (fieldType == 1 || fieldType == 3) {
		//change
		html += "<option value='1' selected>OPTION2</option>";
	} else {
		html += "<option value='1' >OPTION2</option>";
	}
	html += "</select>";

	return html;
}

// イベントリスナー
window.addEventListener('DOMContentLoaded', load, false);
document.getElementById('btnDrwaingmode').addEventListener('click', changeMode, false);
document.getElementById('btnDelete').addEventListener('click', deleteObj, false);
document.getElementById('selectFormTypeImage').addEventListener('change', selectImage, false);
document.addEventListener("keydown", keyDownFunc);
document.addEventListener("keyup", keyUpFunc);
window.addEventListener("wheel", windowMouseWheel, { passive: false });
window.addEventListener("resize", windowResizeFunc);

Comments

[yambejp]

ソースを厳選して載せてください