web page needs to ignore mouse clicks

I created a blazor page to test proficiency. Imagine a typing program.

But occasionally, the student will bump the mouse or trackpad causing the edit box to lose focus, invalidating the test.
I think I want to add a div to capture and ignore mouse clicks on the main form, that is, anywhere not on the sidebar or top menu.

I tried both of

<div class="ignoremouseclick" position:fixed; top:0; bottom:0; left:0; right:0; z-index:-9999; background-color:rgba(0,0,0,0.5); @onclick:preventDefault></div><div class="ignoremouseclick" position:fixed; top:0; bottom:0; left:0; right:0; z-index:-9999; background-color:rgba(0,0,0,0.5); @onclick:"ignoremouse"></div>private void ignoremouse(MouseEventArgs e) {    // ignore mouse clicks}

When I open developer tools, I don't see the div and it doesn't stop the edit box from losing focus.