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;
    }

只需将“click”更改为“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函数
您希望保持完整，但添加额外的mouseenter功能
您还需要维护现有的click功能
此外，您希望触摸用户体验hover和click功能，而不仅仅是click（因为触摸用户会遇到hover和click同一时刻）

至于mouseenter与hover。我会让自己（和其他开发人员）更清洁，并将功能分开。而不是在hover参数中定义匿名函数，比如说：

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

通过这种方式，您可以更轻松地清楚地看到您的过度和完全代码。此外，如果你想要另一个功能，比如禁用它的呼叫，这对于重用更好。

您的hover，mouseenter和mouseout功能不应妨碍click事件。每次互动都会导致mouseenter和click连续发生。

也许使用jQuery mobile进行tap事件，暂时暂停点击。但最终，hover事件只是一个非常精确的事情，它很可能会使触摸设备上的人不得不等待你的悬停事件在触发点击事件之前触发。

希望这有帮助。

jQuery：将mouseenter事件添加到自定义单击功能

1 个答案: