Документ не улавливает события, возникающие во встроенном документе

#html #event-handling #svg

#HTML #обработка событий #svg

Вопрос:

У меня есть HTML, содержащий встроенный SVG с тегом object. Я регистрирую прослушиватели событий для mousemove в глобальном документе, но когда движение мыши происходит на элементе внутри встроенного SVG-документа, обратный вызов, зарегистрированный в глобальном документе для mousemove, не вызывается. Похоже, что проблема заключается во внедрении, но я не мог понять, в чем может быть проблема, я думал, что документ SVG является дочерним по отношению к глобальному документу, и глобальный документ должен получать все события. Кто-нибудь может помочь? Глобальный документ и документ SVG не имеют отношения?

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

1. Проблему можно продемонстрировать с любым встроенным SVG с помощью <object> : <object data="http://upload.wikimedia.org/wikipedia/commons/c/c7/SVG.svg" type="image/svg xml" width="400" height="300" onmousemove="console.log('test');"></object> . Возможно, это проблема Firefox, я не пробовал в IE.

Ответ №1:

Я попробовал следующее:

 <div style="position:relative; background-color:red; height:300px">
    <object data="http://upload.wikimedia.org/wikipedia/commons/c/c7/SVG.svg" type="image/svg xml" height="300" width="400" style="position:absolute;z-index:1;" 
        onclick="console.log('clickSVG');" 
        onmousemove="console.log('moveSVG');"
        ></object>
    <div style="height:150px; background-color:blue; z-index:2;"
        onclick="console.log('clickDIV');" 
        onmousemove="console.log('moveDIV');"></div>
</div>
  

С идеей, что div, расположенный над объектом, может улавливать события, но это не так. Я действительно не знаю почему; возможно, стоит попробовать создать объект SVG полностью в JS и напрямую подключить обработчики.

Редактировать: Прошу прощения за то, что откопал старый пост, я понял это немного поздно; Я надеюсь, что это все еще может кому-нибудь помочь.