How to use javascript for a mousedown event to hide a div?

Question

I am trying to use the code below to hide a div using a mousedown event, but it's not working.

I have tried a lot of changes to this code without any luck.

This is my code below:

function simulateMouseDown(theelement){
   var eventName = 'mousedown';
   if(theelement.dispatchEvent){
    var event = document.createEvent("MouseClick");
    event.initMouseEvent(eventName, true, true, window);
    alert(theelement.dispatchEvent(event));

   }else if(theelement.fireEvent){ // IE7 and below
     theelement.fireEvent('on'+eventName);
     alert(theelement.dispatchEvent(event));
   }
};

Any ideas as to the proper way to do this?

Answer 1

var div    = document.getElementById('test'),
    iframe = document.getElementsByClassName('myiframe')[0];

iframe.contentWindow.document.addEventListener('click', function(event) {
    div.style.display = 'none';
}, false);

FIDDLE

Answer 2

document.getElementById('myButton').addEventListener('mousedown', function(evt){
    document.getElementById('elementToHide').style.display='none';
}, true);