how to trigger “onMouseOut” from click

Question

So this is a pretty simple question, but researching it, I can only find answers to more complicated situations. Here's mine:

I have an image on a master page that when you hover over it, a panel is displayed beneath it (using css mostly) and that panel has links in it. Because the master page is the same, clicking on those links correctly incorporates the new content page below, but the panel stays visible until you move the mouse out of the panel, and so it covers some of the content.

What I'd like is for the onClick event of that link to also trigger the onMouseOut so that when the link is clicked, the panel hides itself again, until the image is hovered over again. I've got a decent amount of JavaScript experience, but it seems like there should be an easier way to do this... something like adding to the li or anchor tag an onClick:onMouseOut() , but I'm having a hard time figuring out how to actually write it... ideas?

Answer 1

Have you tried toggling a class on click, and using that class to remove the functionality that shows the panel on hover? So for example, add class "hide" on click. Then:

.panel.hide {
    display: none;
}

Answer 2

You could use the createElement method to overcome this problem:

 // Create the event.
 var eventMouseOut = document.createEvent('MouseEvents');

 // Define that the event name is 'mouseout'.
 eventMouseOut .initMouseEvent('mouseout', true, true,...);

 // Listen for the event.
 document.getElementById(...).addEventListener('click', function (e) {

   // handle click
   ...
   ...

   // dispatch mouseout-event
   document.getElementById('panel-id').dispatchEvent(eventMouseOut ); 

 }, false);

dispatchEvent can be called wherever you want like within a onClick-handler. Pleasse watch out that the addEventListener is in old IE-versions not supported. source: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent

similar question and answer:

Answer 3

I found a simpler way...

    $(document).ready(function () {
    $("a").click(
    function() {
    $(this).closest(".drop").trigger(onmouseout);
    })
    });

This just adds the mouseout event to every anchor that's clicked...so it might be a bit of overkill, but I couldn't imagine a scenario in my page where a user would click on a link, and we would want to retain the menu open.