Я пишу приложение javascript для Chrome версии 66.0.3359.139 (и, возможно, других версий в конце концов). Я пытаюсь сделать SVG-элементы кликабельными. Т.е. их onclick методы должны вызываться при нажатии.
Вот моя первая попытка:
<html><body style="margin:0;overflow:hidden">
<svg id="svg" width="100%" height="100%"></svg>
<script>
let svg = document.getElementById("svg");
function clear()
{
svg.innerHTML = '';
}
function circle(p, r)
{
let e = document.createElementNS(svg.namespaceURI, 'circle');
e.setAttribute('cx', p.x);
e.setAttribute('cy', p.y);
e.setAttribute('r', r);
svg.appendChild(e);
return e;
}
onresize = function()
{
clear();
let r = svg.getBoundingClientRect();
c1 = circle({x: r.x + r.width/2, y:r.y + r.height - 20}, 10);
c2 = circle({x: r.x + r.width/2, y:20}, 10);
c1.onclick = function(){svg.removeChild(c1);}
c2.onclick = function(){svg.removeChild(c2);}
}
onresize();
</script>
</body></html>
Этот код создает один кружок вверху страницы и один внизу. Круги также пересчитываются при изменении размера страницы, чтобы они всегда были видны. В качестве теста я хочу удалить круг при его нажатии.
Иногда приведенный выше код работает. Однако, когда я запускаю его в полноэкранном режиме, после открытия инструментов разработчика в нижней части окна, а затем закрытия инструментов разработчика невозможно щелкнуть нижний круг - до тех пор, пока в следующий раз я не увеличу или не изменит размер окна.
Я подумал, что, возможно, это ошибка браузера, потому что она появляется, когда я использую инструменты разработчика, как описано выше, и вообще не возникает в Firefox. Однако тогда я заметил, что другие сайты не имеют этой проблемы. Кроме того, найти ошибку браузера не так просто, так как в Chrome работает так много сайтов.
Кто-нибудь видит проблему с моим кодом Javascript, из-за которой нижний кружок не может получать onclick события?
обновление
Я не могу воспроизвести эту проблему в Chrome версии 74.0.3729.169 Linux или Windows. Это может быть характерно для Linux chrome версии 66.0.3359.139.
Однако это еще не означает, что это ошибка браузера ... должен ли работать код или нет?
обновление
Эта проблема также воспроизводима в Linux Chrome версии 66.0.3359.181. Я испытываю трудности с понижением до 66.0.3359.139 (я не могу найти дебат. Google может раздражать таким образом). Так что теперь я нацеливаюсь на 66.0.3359.181.
обновление
Кажется, настоящая проблема вызвана
<body style="margin:0">
Если этот стиль удален, то настоящая проблема не возникает, но возникает другая проблема . Настоящая проблема возникает в равной степени с:
<style>
html, body, * {
margin: 0;
padding: 0;
}
</style>
Это относится и к моей версии, и к версии D3, опубликованной Dataminion.
Так что у нас действительно есть шишка под ковром ... мы можем наступить на него, но это вызывает комок где-то еще. Решите события, но тогда SVG не сможет заполнить страницу. Решите оба вышеперечисленных, но обновите браузер (и исправьте новый набор ошибок).
обновление
Работает с
<body style="margin:1">
с единственным недостатком: svg отключен на 1 пиксель, и есть нежелательная полоса прокрутки. Обратите внимание, что:
<body style="margin:1;overflow:hidden">
удаляет полосу прокрутки и снова вводит ошибку.
Так что либо overflow:hidden, либо margin:0 вызывает проблему. Любой из них удаляет полосу прокрутки. Таким образом, проблема связана с отсутствием полосы прокрутки (независимо от того, как она удалена).