jQuery：將鼠標事件添加到自定義點擊功能

Question

我一直在試圖用'mouseenter'事件來對現有點擊功能添加一個鼠標滾動功能，並且似乎沒有找到實現預期的正確公式影響。

原始代碼：

$('.navhandle, .navcontainer, #tray-button, .page-template-template-home-php .lines, .single-portfolio .lines').hover(
function(){ $('#supersized img').addClass('resize'); //add class for css3 transitions 
$thisid = $(this).attr("id"); 
$thisclass = $(this).attr("class"); 
$navnow = $('.navhandle').css('left'); 

if ($navnow == navhandleinit) { 

if (($thisid == 'tray-button')) { 
    $('#thumb-tray').stop().animate({bottom : 0}, 300); 
} 
    $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic'); 
    $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic'); 
    $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic'); 
    $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion 
    $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic'); 


    $('.nav').fadeOut(500, 'easeOutCubic'); 

    $('.navhandle').toggleClass("rightarrow"); 
},function(){ $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic'); 
    $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic'); 
    $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic'); 
    $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion 
    $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300); 
    $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic'); 

    $('.nav').fadeIn(500, 'easeOutCubic'); 

    $('.navhandle').toggleClass("rightarrow"); 

    $navnow = navhandleinit; 
    } 

只需改變一下來「的mouseenter」工作在觸發作用，但不是孤立特定的元素。

失敗的嘗試：

jQuery(function($) { 

var navhandleinit = $('.navhandle').css('left'); 
var navwidth = $('.navcontainer').width() + 30; 
var mainmargin = $('.mainbody').css('margin-left'); 
var $navnow = $('.navhandle').css('left'); 
var navtray = $('#thumb-tray').css('left'); 

$('.navhandle, .navcontainer').mouseenter(function() { 

$('#supersized img').addClass('resize'); 
$thisid = $(this).attr("id"); 
$thisclass = $(this).attr("class"); 
$navnow = $('.navhandle').css('left'); 

if ($navnow == navhandleinit) { 

if (($thisid == 'tray-button')) { 
    $('#thumb-tray').stop().animate({bottom : 0}, 300); 
} 
    $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic'); 
    $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic'); 
    $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic'); 
    $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion 
    $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic'); 


    $('.nav').fadeOut(500, 'easeOutCubic'); 

    $('.navhandle').toggleClass("rightarrow"); 



} else { 

    $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic'); 
    $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic'); 
    $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic'); 
    $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion 
    $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300); 
    $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic'); 

    $('.nav').fadeIn(500, 'easeOutCubic'); 

    $('.navhandle').toggleClass("rightarrow"); 

    $navnow = navhandleinit; 
} 

}); 

}）;

如何在保持原始點擊事件功能的同時，有效地爲平板電腦添加一個mouseenter事件和一個可選的滑動事件？

活頁面可在http://stage.daylight.pro。

我會感謝您的幫助，謝謝。

Answer 1

我不確定這是否在您的代碼中略過，但您的示例都沒有關閉hover()和mouseenter()方法。 你的失敗嘗試應該以a）結束;像

$('.navhandle, .navcontainer').mouseenter(function() { ... }); 

從

除此之外，我不知道爲什麼你的hover()或mouseenter()方法會影響定義的任何點擊方法（除非有在click()功能在您的hover()功能明確覆蓋的東西）。

更新： 如果我理解你，你有以下參數/目標：

1. 一個jQuery hover函數中的現有代碼
2. 你想保持這種不變，但增加了一個另外mouseenter功能
3. 還有，你想和
4. 此外，想要觸摸的用戶體驗，以保持現有的click功能hover和click功能，而不是僅僅只click（因爲觸摸用戶體驗hover和click在同一時刻）

至於mouseenter與hover。我會讓自己（和其他開發人員）更清潔一些，並將功能分開。而不是hover參數範圍內定義匿名函數，這樣說：

$('myDiv').hover(hoverIn, hoverOut); 
function hoverIn() { ... } 
function hoverOut() { ... } 

這樣你可以更容易地看到你了，出局碼明顯。此外，如果您希望另一個功能（例如，禁用它的呼叫），則這更好地重用。

您的hover,mouseenter和mouseout功能不應妨礙click事件。通過每次互動，您將連續發生mouseenter和click。

也許使用jQuery手機的tap事件，將暫停點擊。但最終，hover事件只是一個很好的事情，它很可能會讓觸摸設備上的人們在點擊事件發生之前必須等待一會兒，而您的懸停事件觸發。

希望這會有所幫助。