move event handlers to overlay instead of svg itself

src/index.ts

@@ -44,7 +44,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
   protected options: CoreOptions<O>;
 
   protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
-  protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
+  protected overlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
   protected crosshair?: d3.Selection<SVGGElement, unknown, null, undefined>;
   protected brush?: d3.BrushBehavior<unknown>;
   protected zoom?: any;
@@ -332,11 +332,24 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
       this.initPan();
     }
 
-    this.chartContainer
+    setTimeout(() => {
+      this.overlay = this.chartContainer.select('.overlay');
+
+      this.overlay
         .on('mouseover', this.onMouseOver.bind(this))
         .on('mouseout', this.onMouseOut.bind(this))
         .on('mousemove', this.onMouseMove.bind(this))
-      .on('dblclick.zoom', this.zoomOut.bind(this));
+        .on('dblclick', () => {
+          d3.event.stopPropagation();
+          // TODO: add the same check as we have in line-pod
+          this.zoomOut();
+        })
+        .on('dblclick.zoom', () => {
+          d3.event.stopPropagation();
+          // TODO: add the same check as we have in line-pod
+          this.zoomOut();
+        });
+    }, 0);
   }
 
   protected initBrush(): void {
@@ -404,8 +417,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
     }
     if(this.options.mouseZoomEvent.isActive === false) {
       // init cumstom overlay to handle all events
-      this.customOverlay = this.chartContainer.append('rect')
+      this.overlay = this.chartContainer.append('rect')
-        .attr('class', 'custom-overlay')
+        .attr('class', 'overlay')
         .attr('width', this.width)
         .attr('height', this.height)
         .attr('x', 0)