HTML <div>с проблемой SVG onclick

Question

У меня есть родительский div с тегом дочернего объекта, который содержит мой svg.

Я пытаюсь захватить клики на моем изображении, но это не работает.

В примерефрагмент кода, предупреждение отображается только тогда, когда один клик находится за пределами отображаемого svg.

HTML:

<div class="calendarWidget" onclick="alert('test');">
    <span>
        <object  onclick="alert('test1');" data="https://www.multiservicetolls.com/wp-content/uploads/revslider/assets/svg/busy-icons-svg/folder-private.svg" type="image/svg+xml"></object>
    </span>
</div>

CSS:

.calendarWidget {
  position: fixed;
  max-width: 200px;
  width: 200px;
  right: 20px;
  bottom: 20px;
  background-color:green;
  z-index: 1;
}

JSFiddle

Из-за моего требования я не могу написать код скрипта в svg.

Answer 1

Вероятно, самый простой способ - это сохранить обработчик в div и настроить браузер на игнорирование событий мыши в svg с помощью css pointer-events: none;.Запустите фрагмент ниже, чтобы увидеть, как он работает (я переместил svg в верхний левый угол ради этой демонстрации).

.calendarWidget {
  position: fixed;
  max-width: 200px;
  width: 200px;
  left: 20px;
  top: 20px;
  background-color:green;
  z-index: 1;
}
.ignoreMouse{
  pointer-events: none;
}

<div class="calendarWidget" onclick="alert('test');">
  <span>
    <object class="ignoreMouse" data="https://www.multiservicetolls.com/wp-content/uploads/revslider/assets/svg/busy-icons-svg/folder-private.svg" type="image/svg+xml"></object>
   </span>
</div>