Показать сообщение отдельно
  #4 (permalink)  
Старый 23.04.2021, 11:02
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Пожалуйста, помогите на ту же тему подсказки, запутался и не могу разобраться почему.

Дополнительно в текст подсказки я решил добавить <ul> <li> таги, чтобы сделать itemize, в этом случае эти itemize не действует клик для удаления подсказки.

Скажите, пожалуйста, как сделать, чтобы кликалось на все поле подсказки, а не только на то, что вне поля <ul> </ul>

Спасибо!

<!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()
{ let aaa=event.target.id.split("_h_");
  if(aaa[1]=="i" || aaa[1]=='h')
  { let val=aaa[0];
    HelperSwitch[val]=1-HelperSwitch[val];
    if(HelperSwitch[val]==0) { ID(val + "_h_h").className="css_xh"; ID(val + "_h_i").className='css_help'; }
    else { ID(val + "_h_h").className="css_xs"; ID(val + "_h_i").className='css_phelp'; }
  }
}


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_i").addEventListener('click', HelperClick);
  ID(out+"_h_h").addEventListener('click', HelperClick);
  HelperSwitch[out] = 0;
}

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>



PS: причем попытка добавить евент на каждый чайлд как было описано в https://stackoverflow.com/questions/...-all-childeren к сожалению не помогла, поэтому и вопрошаю, пожалуйста, подсобите!

Последний раз редактировалось Was-Ja, 23.04.2021 в 12:52.
Ответить с цитированием