diff --git a/src/components/PointerCapture/PointerCapture.tsx b/src/components/PointerCapture/PointerCapture.tsx
index c56b8e638..2de47f898 100644
--- a/src/components/PointerCapture/PointerCapture.tsx
+++ b/src/components/PointerCapture/PointerCapture.tsx
@@ -39,8 +39,8 @@ function PointerCapture(props: Props, ref: React.Ref<PointerCaptureRef>): JSX.El
         event.preventDefault();
         event.stopPropagation();
     };
-    const handleMouseDown = ({ buttons, clientX, clientY }: React.MouseEvent): void => {
-        if (buttons !== MOUSE_PRIMARY) {
+    const handleMouseDown = ({ button, clientX, clientY }: React.MouseEvent): void => {
+        if (button !== MOUSE_PRIMARY) {
             return;
         }
 
@@ -66,8 +66,8 @@ function PointerCapture(props: Props, ref: React.Ref<PointerCaptureRef>): JSX.El
     };
 
     React.useEffect(() => {
-        const handleMouseMove = ({ buttons, clientX, clientY }: MouseEvent): void => {
-            if (buttons !== MOUSE_PRIMARY || status === Status.init) {
+        const handleMouseMove = ({ button, clientX, clientY }: MouseEvent): void => {
+            if (button !== MOUSE_PRIMARY || status === Status.init) {
                 return;
             }
 
diff --git a/src/components/PointerCapture/__tests__/PointerCapture-test.tsx b/src/components/PointerCapture/__tests__/PointerCapture-test.tsx
index ba1900ccc..8362ffc77 100644
--- a/src/components/PointerCapture/__tests__/PointerCapture-test.tsx
+++ b/src/components/PointerCapture/__tests__/PointerCapture-test.tsx
@@ -60,7 +60,7 @@ describe('PointerCapture', () => {
     describe('eventing', () => {
         const mockMouseEvent = {
             ...mockEvent,
-            buttons: 1,
+            button: 0,
         };
 
         const mockTouchEvent = {
@@ -85,7 +85,7 @@ describe('PointerCapture', () => {
         test('should not invoke onDrawStart if mousedown event is not the primary button', () => {
             const onDrawStart = jest.fn();
             const wrapper = getWrapper({ onDrawStart });
-            const event = { ...mockEvent, buttons: 2 };
+            const event = { ...mockEvent, button: 1 };
 
             wrapper.find('div').simulate('mousedown', event);
 
@@ -136,7 +136,7 @@ describe('PointerCapture', () => {
                 document.dispatchEvent(
                     new MouseEvent('mousemove', {
                         ...mockMouseEvent,
-                        buttons: 2,
+                        button: 1,
                         clientX: 10,
                         clientY: 10,
                     }),
@@ -151,7 +151,7 @@ describe('PointerCapture', () => {
                 document.dispatchEvent(
                     new MouseEvent('mousemove', {
                         ...mockMouseEvent,
-                        buttons: 1,
+                        button: 0,
                         clientX: 10,
                         clientY: 10,
                     }),
diff --git a/src/constants.js b/src/constants.js
index 9fa5f217c..952700abf 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,4 +5,4 @@ export const ANNOTATOR_EVENT = {
     setVisibility: 'annotationsetvisibility',
 };
 
-export const MOUSE_PRIMARY = 1;
+export const MOUSE_PRIMARY = 0;
diff --git a/src/drawing/DrawingTarget.tsx b/src/drawing/DrawingTarget.tsx
index cadc8dcf3..f256408c1 100644
--- a/src/drawing/DrawingTarget.tsx
+++ b/src/drawing/DrawingTarget.tsx
@@ -36,7 +36,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
         onSelect(annotationId);
     };
     const handleMouseDown = (event: React.MouseEvent<DrawingTargetRef>): void => {
-        if (event.buttons !== MOUSE_PRIMARY) {
+        if (event.button !== MOUSE_PRIMARY) {
             return;
         }
         const activeElement = document.activeElement as HTMLElement;
diff --git a/src/drawing/__tests__/DrawingTarget-test.tsx b/src/drawing/__tests__/DrawingTarget-test.tsx
index fb8a94692..558ec3c92 100644
--- a/src/drawing/__tests__/DrawingTarget-test.tsx
+++ b/src/drawing/__tests__/DrawingTarget-test.tsx
@@ -55,7 +55,7 @@ describe('DrawingTarget', () => {
         describe('handleMouseDown()', () => {
             // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
             const getEvent = () => ({
-                buttons: 1,
+                button: 0,
                 currentTarget: {
                     focus: jest.fn(),
                 },
@@ -68,7 +68,7 @@ describe('DrawingTarget', () => {
                 const anchor = wrapper.find('a');
                 const event = {
                     ...getEvent(),
-                    buttons: 2,
+                    button: 1,
                 };
 
                 anchor.simulate('mousedown', event);
diff --git a/src/highlight/HighlightCreatorManager.ts b/src/highlight/HighlightCreatorManager.ts
index 91b92556c..e028774e4 100644
--- a/src/highlight/HighlightCreatorManager.ts
+++ b/src/highlight/HighlightCreatorManager.ts
@@ -55,8 +55,8 @@ export default class HighlightCreatorManager implements Manager {
         this.referenceEl.removeEventListener('mouseup', this.handleMouseUp);
     }
 
-    handleMouseDown = ({ buttons }: MouseEvent): void => {
-        if (buttons !== MOUSE_PRIMARY) {
+    handleMouseDown = ({ button }: MouseEvent): void => {
+        if (button !== MOUSE_PRIMARY) {
             return;
         }
 
diff --git a/src/highlight/HighlightTarget.tsx b/src/highlight/HighlightTarget.tsx
index c77c1a841..c08ae6d10 100644
--- a/src/highlight/HighlightTarget.tsx
+++ b/src/highlight/HighlightTarget.tsx
@@ -41,7 +41,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
     };
 
     const handleMouseDown = (event: React.MouseEvent<HighlightTargetRef>): void => {
-        if (event.buttons !== MOUSE_PRIMARY) {
+        if (event.button !== MOUSE_PRIMARY) {
             return;
         }
         const activeElement = document.activeElement as HTMLElement;
diff --git a/src/highlight/__tests__/HighlightCreatorManager-test.ts b/src/highlight/__tests__/HighlightCreatorManager-test.ts
index 43efc1e7c..eb39c4196 100644
--- a/src/highlight/__tests__/HighlightCreatorManager-test.ts
+++ b/src/highlight/__tests__/HighlightCreatorManager-test.ts
@@ -88,7 +88,7 @@ describe('HighlightCreatorManager', () => {
             ((setIsSelectingAction as unknown) as jest.Mock).mockReturnValue({ type: 'set_is_selecting' });
             ((setSelectionAction as unknown) as jest.Mock).mockReturnValue({ type: 'set_selection' });
 
-            wrapper.handleMouseDown(new MouseEvent('mousedown', { buttons: 1 }));
+            wrapper.handleMouseDown(new MouseEvent('mousedown', { button: 0 }));
 
             expect(clearTimeout).toHaveBeenCalledWith(1);
             expect(setIsSelectingAction).toHaveBeenCalledWith(true);
@@ -100,7 +100,7 @@ describe('HighlightCreatorManager', () => {
         test('should do nothing if is not primary button', () => {
             const wrapper = getWrapper();
 
-            wrapper.handleMouseDown(new MouseEvent('mousedown', { buttons: 2 }));
+            wrapper.handleMouseDown(new MouseEvent('mousedown', { button: 1 }));
 
             expect(defaults.store.dispatch).not.toHaveBeenCalled();
         });
diff --git a/src/highlight/__tests__/HighlightTarget-test.tsx b/src/highlight/__tests__/HighlightTarget-test.tsx
index 5a0246b82..ceb5231a8 100644
--- a/src/highlight/__tests__/HighlightTarget-test.tsx
+++ b/src/highlight/__tests__/HighlightTarget-test.tsx
@@ -53,7 +53,7 @@ describe('HighlightTarget', () => {
 
         describe('handleMouseDown()', () => {
             const mockEvent = {
-                buttons: 1,
+                button: 0,
                 currentTarget: {
                     focus: jest.fn(),
                 },
@@ -66,7 +66,7 @@ describe('HighlightTarget', () => {
                 const anchor = wrapper.find('a');
                 const event = {
                     ...mockEvent,
-                    buttons: 2,
+                    button: 1,
                 };
 
                 anchor.simulate('mousedown', event);
diff --git a/src/region/RegionAnnotation.tsx b/src/region/RegionAnnotation.tsx
index 2868cdc8c..3e0cab1f4 100644
--- a/src/region/RegionAnnotation.tsx
+++ b/src/region/RegionAnnotation.tsx
@@ -23,7 +23,7 @@ export const RegionAnnotation = (props: Props, ref: React.Ref<RegionAnnotationRe
         onSelect(annotationId);
     };
     const handleMouseDown = (event: React.MouseEvent<RegionAnnotationRef>): void => {
-        if (event.buttons !== MOUSE_PRIMARY) {
+        if (event.button !== MOUSE_PRIMARY) {
             return;
         }
 
diff --git a/src/region/__tests__/RegionAnnotation-test.tsx b/src/region/__tests__/RegionAnnotation-test.tsx
index 1b09eff28..85f27c8ac 100644
--- a/src/region/__tests__/RegionAnnotation-test.tsx
+++ b/src/region/__tests__/RegionAnnotation-test.tsx
@@ -31,7 +31,7 @@ describe('RegionAnnotation', () => {
 
         test('should focus the button on mousedown', () => {
             const button = { focus: jest.fn() };
-            const event = { buttons: 1, currentTarget: button, ...mockEvent };
+            const event = { button: 0, currentTarget: button, ...mockEvent };
             const wrapper = getWrapper();
 
             wrapper.simulate('mousedown', event);
diff --git a/src/region/__tests__/RegionCreator-test.tsx b/src/region/__tests__/RegionCreator-test.tsx
index cf23f301f..2e734d055 100644
--- a/src/region/__tests__/RegionCreator-test.tsx
+++ b/src/region/__tests__/RegionCreator-test.tsx
@@ -48,11 +48,11 @@ describe('RegionCreator', () => {
     describe('mouse events', () => {
         const simulateDrawStart = (wrapper: ReactWrapper, clientX = 10, clientY = 10): void =>
             act(() => {
-                wrapper.simulate('mousedown', { buttons: 1, clientX, clientY });
+                wrapper.simulate('mousedown', { button: 0, clientX, clientY });
             });
         const simulateDrawMove = (clientX = 10, clientY = 10): void =>
             act(() => {
-                document.dispatchEvent(new MouseEvent('mousemove', { buttons: 1, clientX, clientY }));
+                document.dispatchEvent(new MouseEvent('mousemove', { button: 0, clientX, clientY }));
             });
         const simulateDrawStop = (): void =>
             act(() => {
@@ -132,9 +132,9 @@ describe('RegionCreator', () => {
             const wrapper = getWrapper();
 
             act(() => {
-                wrapper.simulate('mousedown', { buttons: 2, clientX: 50, clientY: 50 });
-                document.dispatchEvent(new MouseEvent('mousemove', { buttons: 2, clientX: 100, clientY: 100 }));
-                document.dispatchEvent(new MouseEvent('mouseup', { buttons: 2, clientX: 100, clientY: 100 }));
+                wrapper.simulate('mousedown', { button: 1, clientX: 50, clientY: 50 });
+                document.dispatchEvent(new MouseEvent('mousemove', { button: 1, clientX: 100, clientY: 100 }));
+                document.dispatchEvent(new MouseEvent('mouseup', { button: 1, clientX: 100, clientY: 100 }));
             });
             jest.advanceTimersByTime(1000);
             wrapper.update();