diff --git a/src/components/map/Handlers.test.tsx b/src/components/map/Handlers.test.tsx
index 0d0a31e..343aa2f 100644
--- a/src/components/map/Handlers.test.tsx
+++ b/src/components/map/Handlers.test.tsx
@@ -1,23 +1,153 @@
-import { render, screen } from '@testing-library/react';
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
 import { Handlers } from './Handlers';
 import { Point } from './types';
 describe('The Handlers component ', () => {
-  test('Is just an empty div', () => {
+  test('is just an empty div', () => {
     const transformMap = (
       deltaShift: Point | null,
       deltaZoom: number | null,
       zoomCenter: Point | null
     ) => {};
-    const { baseElement } = render(<Handlers transformMap={transformMap} />);
+    render(<Handlers transformMap={transformMap} />);
     // screen.debug();
-    expect(baseElement).toMatchInlineSnapshot(`
-<body>
-  <div>
-    <div
-      class="handler"
-    />
-  </div>
-</body>
+    const handlers = screen.getByRole('presentation');
+    // screen.debug();
+    expect(handlers).toMatchInlineSnapshot(`
+<div
+  class="handler"
+  role="presentation"
+/>
 `);
   });
+  test('handle mouseDown / mouseMove events', () => {
+    var transformMapParams: any;
+    function transformMap(
+      deltaShift: Point | null,
+      deltaZoom: number | null,
+      zoomCenter: Point | null
+    ) {
+      console.log(`transformMap${JSON.stringify(arguments)}`);
+      transformMapParams = arguments;
+    }
+    render(<Handlers transformMap={transformMap} />);
+    const handlers = screen.getByRole('presentation');
+    fireEvent(
+      handlers,
+      createEvent.mouseDown(handlers, {
+        clientX: 10,
+        clientY: 20,
+      })
+    );
+    fireEvent(
+      handlers,
+      createEvent.mouseMove(handlers, {
+        clientX: 20,
+        clientY: 50,
+      })
+    );
+    // screen.debug();
+    expect(transformMapParams).toMatchInlineSnapshot(`
+Arguments [
+  Object {
+    "x": 10,
+    "y": 30,
+  },
+  null,
+  null,
+]
+`);
+  });
+  test('does *not* handle mouseMove events not preceded by a mouseDown', () => {
+    var transformMapParams: any;
+    function transformMap(
+      deltaShift: Point | null,
+      deltaZoom: number | null,
+      zoomCenter: Point | null
+    ) {
+      console.log(`transformMap${JSON.stringify(arguments)}`);
+      transformMapParams = arguments;
+    }
+    render(<Handlers transformMap={transformMap} />);
+    const handlers = screen.getByRole('presentation');
+    fireEvent(
+      handlers,
+      createEvent.mouseMove(handlers, {
+        clientX: 20,
+        clientY: 50,
+      })
+    );
+    // screen.debug();
+    expect(transformMapParams).toBeUndefined();
+  });
+
+  test('A mouseUp event disable further mouseMove events', () => {
+    var transformMapParams: any;
+    function transformMap(
+      deltaShift: Point | null,
+      deltaZoom: number | null,
+      zoomCenter: Point | null
+    ) {
+      console.log(`transformMap${JSON.stringify(arguments)}`);
+      transformMapParams = arguments;
+    }
+    render(<Handlers transformMap={transformMap} />);
+    const handlers = screen.getByRole('presentation');
+    fireEvent(
+      handlers,
+      createEvent.mouseDown(handlers, {
+        clientX: 10,
+        clientY: 20,
+      })
+    );
+    fireEvent(
+      handlers,
+      createEvent.mouseUp(handlers, {
+        clientX: 20,
+        clientY: 50,
+      })
+    );
+    fireEvent(
+      handlers,
+      createEvent.mouseMove(handlers, {
+        clientX: 20,
+        clientY: 50,
+      })
+    );
+    // screen.debug();
+    expect(transformMapParams).toBeUndefined();
+  });
+
+  test('A mouseLeave event disable further mouseMove events', () => {
+    var transformMapParams: any;
+    function transformMap(
+      deltaShift: Point | null,
+      deltaZoom: number | null,
+      zoomCenter: Point | null
+    ) {
+      console.log(`transformMap${JSON.stringify(arguments)}`);
+      transformMapParams = arguments;
+    }
+    render(<Handlers transformMap={transformMap} />);
+    const handlers = screen.getByRole('presentation');
+    fireEvent(handlers, createEvent.mouseOver(handlers));
+    fireEvent(handlers, createEvent.mouseEnter(handlers));
+    fireEvent(
+      handlers,
+      createEvent.mouseDown(handlers, {
+        clientX: 10,
+        clientY: 20,
+      })
+    );
+    fireEvent(handlers, createEvent.mouseOut(handlers));
+    fireEvent(handlers, createEvent.mouseLeave(handlers));
+    fireEvent(
+      handlers,
+      createEvent.mouseMove(handlers, {
+        clientX: 20,
+        clientY: 50,
+      })
+    );
+    // screen.debug();
+    expect(transformMapParams).toBeUndefined();
+  });
 });
diff --git a/src/components/map/Handlers.tsx b/src/components/map/Handlers.tsx
index ec6a7de..03f03d2 100644
--- a/src/components/map/Handlers.tsx
+++ b/src/components/map/Handlers.tsx
@@ -24,9 +24,9 @@ export const Handlers: react.FC<HandlersProperties> = (
 ) => {
   const genericHandler = (event: any) => {
     // console.log(`Log - Event:  ${event.type}`);
-    // if (event.pageX !== undefined) {
+    // if (event.clientX !== undefined) {
     //   console.log(
-    //     `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
+    //     `Mouse : ${event.clientX}, ${event.clientY}, target: ${event.target}`
     //   );
     //   console.log(
     //     `mouseState: ' ${JSON.stringify(mouseState)} (+${
@@ -50,7 +50,7 @@ export const Handlers: react.FC<HandlersProperties> = (
     genericHandler(event);
     setMouseState({
       down: true,
-      starting: { x: event.pageX, y: event.pageY },
+      starting: { x: event.clientX, y: event.clientY },
     });
   };
 
@@ -61,27 +61,30 @@ export const Handlers: react.FC<HandlersProperties> = (
 
   const mouseMoveHandler = throttle((event: any) => {
     genericHandler(event);
-    props.transformMap(
-      {
-        x: event.pageX - mouseState.starting.x,
-        y: event.pageY - mouseState.starting.y,
-      },
-      null,
-      null
-    );
-    setMouseState({
-      down: true,
-      starting: {
-        x: event.pageX,
-        y: event.pageY,
-      },
-    });
+    if (mouseState.down) {
+      props.transformMap(
+        {
+          x: event.clientX - mouseState.starting.x,
+          y: event.clientY - mouseState.starting.y,
+        },
+        null,
+        null
+      );
+      setMouseState({
+        down: true,
+        starting: {
+          x: event.clientX,
+          y: event.clientY,
+        },
+      });
+    }
   }, handlersConfig.mouseMoveThrottleDelay);
 
   const [mouseState, setMouseState] = useState(initialMouseState);
   return (
     <div
       className='handler'
+      role='presentation'
       onMouseDown={mouseDownHandler}
       onMouseMove={mouseMoveHandler}
       onMouseUp={mouseUpHandler}
diff --git a/src/components/map/Tile.test.tsx b/src/components/map/Tile.test.tsx
index 7cba8f8..d19b68d 100644
--- a/src/components/map/Tile.test.tsx
+++ b/src/components/map/Tile.test.tsx
@@ -8,7 +8,7 @@ describe('The Tile component ', () => {
         <Tile href='http://fakeurl' delay={10000} />
       </svg>
     );
-    screen.debug();
+    //    screen.debug();
     expect(baseElement).toMatchInlineSnapshot(`
 <body>
   <div>
@@ -25,7 +25,7 @@ describe('The Tile component ', () => {
         <Tile href='http://fakeurl' />
       </svg>
     );
-    screen.debug();
+    //    screen.debug();
     expect(baseElement).toMatchInlineSnapshot(`
 <body>
   <div>
