Не удается щелкнуть событие на элементе SVG после успешного вызова

Question

Я не могу нажать на svg после получения успешного события загрузки. Есть какие-нибудь подсказки? Я записываю консоль возвращенного объекта SVG, но я не получаю щелчка.

https://jsfiddle.net/tz2knqhr/

<embed src="https://www.okcode.pl/img/bg-square.svg" id="embed2" width="15%" height="auto" type="image/svg+xml"></embed>


<script>

function resolveAfter() {
  return new Promise(function(resolve,reject){
      window.addEventListener('load',function(){
        let image = document.getElementById("embed2")
          resolve(image);
      })
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter();
  console.log('result',result);
  result.addEventListener('click',function(event){
    console.log("clicked")
    location.href = "http://google.com"
  })
}

asyncCall();

</script>

Answer 1

Вам нужно будет обернуть embed в object, чтобы он мог получать клики. Чтобы объект всегда получал событие click, я устанавливаю pointer-events: none для всех его (возможных) потомков после вызова embed. Также обратите внимание, что событие click установлено на parentNode возврата функции (object), а не на embed.

function resolveAfter() {
  return new Promise(function(resolve, reject) {
    window.addEventListener('load', function() {
      let image = document.getElementById("embed2")
      resolve(image);
    })
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter();
  console.log('result', result.parentNode);

  result.parentNode.addEventListener('click', function(event) {
    console.log("made it");
    // location.href = "http://google.com"
  })
}

asyncCall();

* {
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100vw;
  padding: 0%;
  margin: 0%;
  background-color: white;
}

object {
  display: inline-flex;
}

object * {
  /* ignore clicks to children */
  pointer-events: none;
}

object embed {
  flex: 1;
}

<object style="width: 15%; height: auto;">
  <embed src="https://www.okcode.pl/img/bg-square.svg" id="embed2" width="15%" height="auto" type="image/svg+xml" />
</object>

jsFiddle