Как сделать так, чтобы клик по object передавался родителю?

Question

[Hidden Fronter]

Вставил object в div, так как клик на object не работает.

<div onclick="DivClick()">
 <object type="image/svg+xml" data="images/test.svg"></object>
</div>

object
{
 float: left;
}

div
{
 padding: 0;
 max-width: 14%;
 margin: auto;
}

function DivClick()
{
 alert("!");
}

Comments

[Wispik]

И в чем проблема?

[Hidden Fronter]

При клике по div не выводится сообщение.

[Wispik]

Hidden Fronter, js файл подключен надеюсь))
код выше полностью рабочий
воспроизведи свою проблему в песочнице и скинь сюда

Answer 1

[Wispik]

Можно для div добавить псевдоэлемент :after

.div {
  position: relative;
}
.div::after {
    content: '';
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
}

Comments

[Hidden Fronter]

Срабатывает теперь клик, но появилась новая проблема - в файле svg, подключенном через object, не работают стили и псевдоклассы.

<svg width="45px" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <style>
   svg
   {
    cursor: pointer;
    transition: 1s;
   }
   svg:hover
   {
    background: goldenrod;
   }
   svg:hover path
   {
    fill: #007fff;
   }
  </style>
 </defs>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M54 20.882V33.618L32 22.618L10 33.618V20.882L32 9.88196L54 20.882ZM52 22.118L32 12.118L12 22.118V30.382L32 20.382L52 30.382V22.118Z" fill="red"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M54 42.882V55.618L32 44.618L10 55.618V42.882L32 31.882L54 42.882ZM52 44.118L32 34.118L12 44.118V52.382L32 42.382L52 52.382V44.118Z" fill="gold"/>
</svg>

[Wispik]

Hidden Fronter, в таком случае лучше вставлять svg напрямую в страницу, без object

[Hidden Fronter]

Wispik, мне так не выгодно. У меня есть еще один svg, в котором много писанины. Строк 100 примерно.

Answer 2

[Дмитрий]

Может без объекта внутри ваш див пустой? То есть имеет нулевые размеры. Поэтому и кликать некуда по сути. Уберите объект, задайте диву фоновый цвет и проверьте. Если ничего не выводится, то значит надо задать ему высоту, как минимум (ширина дивов по умолчанию = 100% родителя)

Comments

[Hidden Fronter]

клик по div без object работает. Именно когда курсор на object, то не срабатывает. Знаю, что можно расположить div поверх object и тогда клик 100% сработает, но это на крайний случай.