平板電腦上的Mouseleave問題

Question

平板電腦上是否有'mouseleave'的替代方案？

場景：

在桌面列表項顯示在'mouseenter'，並隱藏在'mouseleave'。

在平板電腦上，'mouseenter'顯示列表項，但在用戶單擊其他位置時不會將其刪除。

我不想使用touchstart和touchend。

Answer 1

嘗試使用jquery在文檔上添加點擊處理程序。在這個新的處理程序中隱藏列表項。

$(document).on('click:not(#list)', function() { 
    // hide listitems 
}); 

類似這樣的..這可能不是最好的解決方案，但它是一個。

Answer 2

您最好的選擇是爲觸摸設備進行替代交互。最簡單的方法是將一個事件監聽器附加到文檔上，當用戶在列表之外輕擊時會隱藏列表項。

$(document).on('click.list', function (e) { 
    var $list = $(".list"); 

    if (!$list.is(e.target) && $list.has(e.target).length === 0) { 
     $list.hide(); 
    } 
}); 

這是當你要附加一個事件監聽器來記錄到命名空間中的事件（'click.list'）一個很好的做法。

if條件檢查事件目標是列表還是其子目錄之一。

Answer 3

您可以使用.hover，如下圖所示：

$('.foo').hover(
function() { 
$(this).find('h1').addClass("hover").end().find('input').focus();    
     }, 
function() { 
$(this).find('h1').removeClass("hover").end().find('input').val('');    
     } 
    );