jquery - 当项目变得可见时防止鼠标悬停行为

Question

我有一个按钮“添加到购物车”，单击该按钮会发送 ajax 请求。请求成功返回后，该按钮将替换为“在您的购物车中”。 “在您的购物车中”有一个鼠标悬停状态：“从购物车中删除”。

设计要求是，仅当用户将鼠标物理移动到“在您的购物车”上时，才会出现“从购物车中删除”。如果他们只是单击“添加到购物车”而不移动鼠标，则在 ajax 调用完成后，按钮应该显示“在您的购物车中”，即使鼠标仍在该元素上也是如此。

简单的鼠标悬停事件侦听器不起作用，因为它会在元素变得可见时触发。我正在考虑对包装元素的鼠标悬停和鼠标移出进行计数，以确定鼠标悬停事件是否是“真实的”，或者只是元素变得可见的结果，但这真的很难看。对我来说还有其他想法吗？

Answer 1

您可以执行以下操作（根据您的 AJAX 调用进行适当编辑）：

HTML:

<div class="cart">
    <button class="add-cart">Add to Cart</button>
    <button class="in-cart" style="display:none;">In Your Cart</button>
</div>

Javascript:

var $addCart = $('.add-cart');
var $inCart = $('.in-cart');

$addCart.click( function(e){
    $addCart.hide();
    $inCart.show().addClass( 'initial' );
});

$inCart.mouseover( function(){
    if( ! $inCart.is( '.initial' ) ){
        $inCart.text( 'Remove from Cart' );
    }
});

$inCart.mouseout( function(){
    $inCart.text( 'In Your Cart' ).removeClass( 'initial' );
});

jsFiddle

< strong>更新

根据下面OP的评论，我更新了HTML和Javascript，如下所示：

<span class='cart'>
    <button class="add-cart">Add to Cart</button>
    <button class="in-cart" style="display:none;">In Your Cart</button>
</span>

Javascript：

var $cart = $('.cart');
var $addCart = $('.add-cart');
var $inCart = $('.in-cart');

$addCart.click( function(e){
    $addCart.attr('disabled','disabled');
    setTimeout(function(){
        $addCart.hide();
        $inCart.show();
    }, 1000);
});

$cart.mouseenter( function(){
    if( $inCart.is(':visible') ){
        $inCart.text( 'Remove from Cart' );
    }
});

$cart.mouseleave( function(){
    if( $inCart.is(':visible') ){
        $inCart.text( 'In Your Cart' );
    }
});

这里的区别是：

1. 模拟AJAX时，add-cart按钮被禁用，并且然后隐藏。
2. mouseover 和 mouseout 已替换为 mouseenter 和 mouseleave。
3. 这些事件现在与 span 包装器绑定在一起，以便可以更好地跟踪用户鼠标行为，因为 span 永远不会隐藏自身。

更新了 jsFiddle

Answer 2

您可以使用 jQuery 的 event.preventDefault() 来阻止事件触发；

我会这样写：

$('#elementid').mouseover(function(){
    event.preventDefault();
});

这将阻止它执行它应该执行的操作，直到您稍后手动触发它，或者在 event.preventDefault(); 之后添加代码。让它做你想做的事。

Answer 3

使用 jquery，mouseenter 和 mouseleave 仅在您进入或离开时触发...因此，在 ajax 成功时为图像使用静态大小的包装器

，将图像淡入您想要的

mouseenter，检查单击“添加到购物车”时设置的标志，如果设置了，您就知道用户单击了顺序，移动了鼠标，然后移回了..