如何從點擊觸發“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事件添加到每個被點擊的錨點...所以它可能有點過分，但我無法想象我的頁面中用戶會點擊某個鏈接的場景，我們希望保留菜單打開。