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事件添加到每个被点击的锚点...所以它可能有点过分，但我无法想象我的页面中用户会点击某个链接的场景，我们希望保持菜单打开。

如何从点击触发“onMouseOut”

3 个答案: