mousedown doesn't work on a div with an iframe

I have a website that's running WordPress and I'm making the editor look like it's using Gutenberg but with the classic editor and ACF. I'm trying to show some options when you click on a WYSIWYG editor. What I've found is the best way to show this is to use mousedown when the cursor is in a region and appears when you click down on the mouse.

The problem I'm having is that div that needs to be clicked to show some options has an IFRAME and I've tried everything online and nothing appears to work.

Here's my code to show the problem I'm having. What's suppose to happen is when you click on the div with a border, the text at the bottom has a green background.

  $(".test iframe").on("mousedown", function() {
    $('.bottom').css('background','green');
  });

.test {border:1px solid #ccc;width:450px;height:110px}
.test iframe {width:100%;height:100%;border:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><iframe></iframe></div>
<div class="bottom">bottom</div>