如何从点击触发“onMouseOut”

Question

所以这是一个非常简单的问题，但研究它，我只能找到更复杂情况的答案。 这是我的：

我在母版页上有一个图像，当您将鼠标悬停在母版页上时，会在其下方显示一个面板（主要使用css），并且该面板中包含链接。 由于母版页是相同的，因此单击这些链接会正确合并下面的新内容页面，但在将鼠标移出面板之前，面板将保持可见，因此它会覆盖部分内容。

我想要的是该链接的onClick事件也触发onMouseOut以便在单击链接时，面板再次隐藏自身，直到图像再次悬停。 我有相当数量的JavaScript经验，但似乎应该有一个更简单的方法来做到这一点...比如添加到li或锚标签onClick:onMouseOut() ，但我很难时间搞清楚如何写出来...想法？

Answer 1

您是否尝试在单击时切换类，并使用该类删除在悬停时显示面板的功能？ 例如，在点击时添加“隐藏”类。 然后：

.panel.hide {
    display: none;
}

Answer 2

您可以使用createElement方法来解决此问题：

 // 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);

可以在onClick-handler中随意调用dispatchEvent。 请注意，addEventListener是旧IE版本不支持的。 来源： https ： //developer.mozilla.org/en-US/docs/Web/API/document.createEvent

类似的问答：

Answer 3

我找到了一种更简单的方法......

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

这只是将mouseout事件添加到每个被点击的锚点...所以它可能有点过分，但我无法想象我的页面中用户会点击某个链接的场景，我们希望保留菜单打开。