Блог

Главная - Вопросы по программированию - Щелкните обработчик, не работающий для с в качестве дочернего

Щелкните обработчик, не работающий для с в качестве дочернего

#javascript #svg

Вопрос:

У меня есть только два элемента, a div с object прикрепленным как дочерний, который содержит изображение SVG. Обработчик щелчка отлично работает, когда есть только сам div по себе или другой тег в качестве дочернего, например img . Однако, если object это ребенок, обработчик div щелчка запускается только в самом нижнем правом углу. Я действительно застрял в вопросе о том, что могло бы вызвать такое поведение.

 let divContainer = document.createElement('div');
divContainer.className = 'divContainer';
divContainer.style.position = 'absolute'
divContainer.style.top = '100px';
divContainer.style.width = '150px';
divContainer.style.height = '150px';
divContainer.style.background = 'green';
  
let imageChild = document.createElement('object');
imageChild.type = 'image/svg xml';
imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg'
imageChild.className = 'imageChild';
imageChild.style.width = 'inherit';
   
document.body.append(divContainer);
// Comment this out, and it works fine
divContainer.append(imageChild);

divContainer.onclick = function(event) {
  console.log('Click OK!');
}

Комментарии:

1. Ваша свинья находится на верхней части контейнера; отключите щелчки по свинье с помощью: imageChild.style.pointerEvents="none";

2. Ты хотел написать «свинья»? @Дэнни’365CSI ‘ Энгельман?

3. Он <object> поглощает все события щелчка. Вам придется отключить события указателя, как предлагает @Danny’365CSI Энгельман.

4. Большое вам спасибо, работает отлично! @Danny’365CSI ‘ Энгельман

5. Извини за «ты свинья».. Английский не является моим родным языком; и в голландском языке у вас и у вас может быть похожее написание..

Ответ №1:

вот рабочий код

   let divContainer = document.createElement('div');
  divContainer.className = 'divContainer';
  divContainer.style.top = '100px';
  divContainer.style.width = '150px';
  divContainer.style.height = '150px';
  divContainer.style.background = 'green';

  let imageChild = document.createElement('object');
  imageChild.type = 'image/svg xml';
  imageChild.data = 'https://svgsilh.com/svg_v2/48363.svg';
  imageChild.className = 'imageChild';
  imageChild.style.width = 'inherit';
  imageChild.style.pointerEvents = 'none';

  document.body.append(divContainer);
  // Comment this out, and it works fine
  divContainer.append(imageChild);

  divContainer.addEventListener('click', function () {
    alert('Click OK!');
  });
Метки: ,