Closed mStirner closed 11 months ago
Please create a minimal example that shows the issue
The code i posted is a minimal example that shows the issue. Tested on Ubuntu 18.04 LTS, Firefox & Chromium.
If you run the example, an the pump fans spinning (and then click on the pump) no alert is triggerd. When the fans stop/pause, the and you click again, the alert is displayed with "Clicked on pump"
You can run the example directly from the SO page.
EDIT: Created a more minimalist example, with just one element.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Schematic</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
let draw = SVG().addTo('#schematic').size("100%", 500);
let symbol = draw.symbol();
let rect = symbol.rect(100, 100).fill('#f09');
/*
// THIS WORKS FINE!!!
// EVEN WHEN THE ANIMATION IS RUNNING!
let rect = draw.rect(100, 100).fill('#f09');
rect.click(() => {
console.log(`${Date.now()} - ` + "Clicked! -----");
});
*/
// .animate() returns svg.runner
rect.animate(500).ease("-").rotate(10, 10).loop();
let animation = rect.timeline().pause();
setInterval(() => {
animation.play();
setTimeout(() => {
animation.pause();
}, 2500);
}, 5000)
draw.use(symbol).click(() => {
alert("Clicked!");
});
});
</script>
</head>
<body>
<div id="schematic"></div>
</body>
</html>
I think the problem is the event handling on the .use
element in combination with .symbol
The click handler on the .rect
element works fine.
This seems to be indeed a bug in the browser implementation. The element is not targetable while being animated. Please create a bug ticket on the vendor site
I have trouble with fireing events when a animation is running on a element. For example, a simple
click()
callback get not invoked when the element spinns.Demonstation:
The fans of the pump stat spinning after 5sec, when the animation is running/played you can click like a manic on the pump and nothing happens. Is the animation finished/stopped/paused, the alert shows, like it should be.
Can any one explain why this happen and how to fix it ? I created a stackoverflow, question, but answers so far.
I dont think the behaviour should be like this.