CODEWITHSUNDEEP
javascriptsvgevent-handlingforeignobject
Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

Click event doesn't work for overlapping foreignObject in svg

I have an svg element like this,

<svg class="makeStyles-timeline-17" width="100%" height="1920" overflow="auto">
   <foreignObject position="absolute" width="100%" height="1920" pointer-events="all">
      <div>
         <div id="timelineRow_0" data-index="0" data-time="Wed Dec 09 2020 00:00:00 GMT+0600 (Bangladesh Standard Time)" style="height: 20px;"></div>
      </div>
   </foreignObject>
   <foreignObject position="absolute" width="100%" height="1920" pointer-events="all">
      <div style="height: 20px"> Test</div>
   </foreignObject>
 </svg>

There are click events for the child element inside both foreignObject. The foreignObjects are overlapping each other. My problem is the click event for the last foreignObject's child is working fine when I click on that div. But click event is not firing for the first foreignObject's child even though the last foreignObject's div is not overlapping the first foreignObject's div. In short the click events doesn't go through the top foreignObject. It blocks the click event there.

Upvotes: 0

Views: 836

Answers (0)

Related Questions