Was-Ja,
из MakeHelper и HelperClick убрано 50% лишнего. 50% ещё можно убрать, но подучите сначала css.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" id="my_style_id">
* {
margin: 0;
padding: 0;
}
/* to remove the top and left whitespace */
.dshow {
display: inherit;
}
.dhide {
display: none;
}
.dhide,
.dshow {
width: 100%;
}
table,
td {
font-size: 16px;
}
/* just to be sure these are full screen*/
html,
body {
width: 100%;
height: 100%;
}
/* just to be sure these are full screen*/
canvas {
display: block;
}
/* To remove the scrollbars */
img {
background: transparent;
border: none;
background-color: transparent;
}
.css_xh,
.css_xs {
text-align: left;
font-weight: normal;
border-radius: 12px;
z-index: 1;
position: absolute;
width: 574px;
left: 0px;
padding: 10px 10px;
margin: 10px 2px;
border: 3px solid black;
color: black;
background-color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.3), 0 17px 50px 0 rgba(0, 0, 0, 0.3);
}
.css_xh {
display: none;
}
.css_xs {
display: inherit;
}
.css_help,
.css_phelp {
font-size: 16px;
font-weight: bold;
border-radius: 6px;
width: 20px;
border: 2px solid #555555;
}
.css_help {
background-color: #2222e0;
color: white;
}
.css_phelp {
background-color: #22e022;
color: white;
}
.css_help:hover {
background-color: #ccccff;
color: black;
}
.css_phelp:hover {
background-color: #ccffcc;
color: black;
}
.css_tfixed {
touch-action: none;
}
.css_tnormal {
touch-action: auto;
}
.css_pz {
touch-action: pinch-zoom;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="description" content="Test">
<meta name="keywords" content="Test">
<title>Test</title>
</head>
<body bgproperties=fixed>
<table>
<tbody>
<tr>
<td>
<div id='MolFrame'>
<canvas id='c1' class='css_pz' width=600 height=600></canvas><br>
<div id='h1_h'></div>
бла-бла-бла
<canvas id='c2' class='css_tnormal' width=600 height=600></canvas><br>
<div id='h2_h'></div>
бла-бла-бла
<canvas id='c3' class='css_pz' width=600 height=600></canvas><br>
<div id='h3_h'></div>
бла-бла-бла
<canvas id='c4' class='css_tnormal' width=600 height=600></canvas><br>
</div>
</td>
</tr>
<tr>
<td><canvas id='canvas'></canvas></td>
</tr>
</tbody>
</table>
<script>
function ID(id) {
return document.getElementById(id);
}
var HelperSwitch = {};
function HelperClick(event) {
let val = this.id.slice(0, -2);
let add = HelperSwitch[val] = !HelperSwitch[val];
ID(val + "_h_h").classList.toggle("css_xh", !add);
ID(val + "_h_h").classList.toggle("css_xs", add);
ID(val + "_h_i").classList.toggle("css_help", !add);
ID(val + "_h_i").classList.toggle("css_phelp", add);
}
function MakeHelper(inpHTML, out) {
ID(out + "_h").innerHTML = "<button width=20 length=20 class='css_help' id='" + out + "_h_i'>?</button><div id='" + out + "_h_h' class='css_xh'></div>";
ID(out + "_h").style.position = 'relative';
ID(out + "_h_h").innerHTML = inpHTML;
ID(out + "_h").addEventListener('click', HelperClick);
HelperSwitch[out] = false;
}
function RedrawCanvas() {
let canvas = ID('canvas');
let ctx = canvas.getContext('2d');
let cx = window.innerWidth - 15;
let cy = window.innerHeight - 15;
cy /= 2;
canvas.width = cx;
canvas.height = cy;
ID('MolFrame').style = "overflow: auto; max-width:" + cx + "; max-height:" + cy + "; white-space:nowrap;";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.stroke();
}
RedrawCanvas();
MakeHelper("Helper with itemize (в этой строке клик работает):" +
"<ul style='margin-left:30px; display:inherit;'>" +
"<li>item one</li><br>" +
"<li>item two (в строках one-three клики не работают)</li><br>" +
"<li>item three.</li>" +
"</ul><br>" +
"End of itemizing (а тут снова работают)", "h1");
MakeHelper("Second helper", "h2");
MakeHelper("Third helper", "h3");
</script>
</body>
</html>