jquery mouseenter 执行此操作，mouseleave 执行此操作，单击执行此操作并停止 mouseenter/mouseleave 事件答案

【问题标题】：jquery mouseenter do this, mouseleave do that, click do this and stop mouseenter/mouseleave eventsjquery mouseenter 执行此操作，mouseleave 执行此操作，单击执行此操作并停止 mouseenter/mouseleave 事件
【发布时间】：2014-02-23 21:30:30
【问题描述】：

我正在尝试在鼠标输入鼠标离开事件时替换图像属性源。单击时，图像应保持活动状态。单击后，我需要停止 mouseleave 事件。至此mouseeleave在点击后仍然继续，切换回图片，代码如下：

<script>
    jQuery('.paypal').mouseenter(function(){
        jQuery('.paypal').attr('src','http://url-to-my-active-image.jpg');?>');
    }),
    jQuery('.paypal').mouseleave(function(){
        jQuery('.paypal').attr('src','http://url-to-my-inactive-image.jpg');
    }),
    jQuery('.paypal').click(function(){
        jQuery('.paypal').css('opacity','1');
    });
</script>

我怎样才能做到这一点？

【问题讨论】：

可能重复：stackoverflow.com/questions/8628768/…

标签： javascript jquery onclick mouseenter mouseleave

【解决方案1】：

点击时只需转动off鼠标离开：

jQuery('.paypal').click(function(){
    jQuery('.paypal').css('opacity','1').off('mouseleave');
});

【讨论】：

jQuery('.paypal') 似乎也适合缓存，因为它在原始示例中使用了六次。

【解决方案2】：

一个快速的解决方案似乎是在单击时添加一个类，然后在 mouseleave 上检查该类的存在；如果它在那里，什么也不做。

<script>
    jQuery('.paypal').mouseenter(function(){
        jQuery('.paypal').attr('src','http://url-to-my-active-image.jpg');?>');
    }),
    jQuery('.paypal').mouseleave(function(){
        if(!jQuery('.paypal').hasClass('selected')){
            jQuery('.paypal').attr('src','http://url-to-my-inactive-image.jpg');
        }
    }),
    jQuery('.paypal').click(function(){
        jQuery('.paypal').css('opacity','1').addClass('selected');
    });
</script>

@j08691 的答案可能更容易维护，尤其是如果您使用的是最新版本的 jQuery（1.7 或更高版本）。

【讨论】：

【解决方案3】：

您可以使用off 关闭click 处理程序中的mouseleave 处理程序：

jQuery('.paypal').click(function() {
    jQuery('.paypal').css('opacity', '1');
    jQuery('.paypal').off('mouseleave');
});

【讨论】：