Question

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

设计要求是只有当用户将鼠标移动到“In Your Cart”上时，才会显示“从购物车移除”。如果他们只是单击“添加到购物车”并且不移动鼠标，则在ajax调用完成后，按钮应该显示“In Your Cart”，即使鼠标仍在元素上方。

简单的鼠标悬停事件侦听器不起作用，因为它在元素变得可见时触发。我正在考虑计算一个包装元素的鼠标悬停和鼠标悬停，以确定鼠标悬停事件是“真实的”，还是只是元素变得可见的结果，但这真的很难看。还有其他任何想法吗？

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

<强>更新

根据以下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' );
    }
});

这里的区别是：

在模拟AJAX然后隐藏时，add-cart按钮被禁用。
mouseover和mouseout已替换为mouseenter和mouseleave。
这些事件现在与span包装器相关联，因此可以更好地跟踪用户鼠标行为，因为span永远不会隐藏自己。

Updated jsFiddle

Answer 2

您可以使用jQuery的event.preventDefault（）;

阻止事件触发

我会这样写：

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

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

Answer 3

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

onjccess ajax，将图像淡化为你想要的

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

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

3 个答案: