JQuery - предотвратить поведение при наведении курсора, когда элемент становится видимым

Question

У меня есть кнопка «Добавить в корзину», которая отправляет запрос ajax при нажатии.После успешного возврата запроса кнопка заменяется на «В вашей корзине».«В вашей корзине» находится в состоянии наведения мыши: «Удалить из корзины».

Требование к оформлению состоит в том, что «Удалить из корзины» появляется только тогда, когда пользователь физически наводит указатель мыши на «В вашей корзине».Если они просто нажимают «Добавить в корзину» и не перемещают мышь, кнопка должна сказать «В вашей корзине» после завершения вызова ajax, даже если мышь все еще находится над элементом.

Простойслушатель события mouseover не работает, потому что он срабатывает, когда элемент становится видимым.Я рассматриваю подсчет указателей мыши и указателей мыши для элемента-оболочки, чтобы определить, является ли событие указателя мыши «реальным» или просто результатом того, что элемент стал видимым, но это действительно ужасно.Любые другие идеи для меня?

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

Различия здесь:

1. Кнопка add-cart отключена, пока AJAX моделируется, а затем скрывается.
2. mouseover и mouseout были заменены на mouseenter и mouseleave.
3. Эти события теперь привязаны к оболочке span, так что поведение мыши можно лучше отслеживать, поскольку span никогда не скрывается.

Обновлен jsFiddle

Answer 2

при использовании jquery, mouseenter и mouseleave срабатывает только при входе или выходе ... так что используйте обертку статического размера для вашего изображения

при успешном использовании ajax, уменьшите изображение до желаемого

mouseenter, проверьте флаг, который вы установили, когда нажимали кнопку «Добавить в корзину», если она установлена, вы знаете, что пользователь щелкнул по порядку, переместил мышь, а затем вернулся обратно.

Answer 3

Вы можете предотвратить запуск события с помощью события jQuery.preventDefault ();

Я бы написал так:

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

Это остановит его от выполнения того, что он должен делать, пока вы не запустите его вручную позже или не добавите код после event.preventDefault (); заставить его делать то, что ты хочешь.