Question

我的代码如下：

 jQuery.noConflict();
    var x=0;
    myw=0;
    oin="";
    jQuery(document).ready(function () {
        if(x >3){
            $("img:odd").unbind("mouseenter");
            return false;
        }        
        jQuery("img:odd").mouseenter(function(e) {
          //  oin="";
            console.log(e);
            console.log(this);
            console.log(this.src);
            oin=this.src;
            this.src="snowdrop.png";
            myw=this.width;
            this.width=100;
            x=x+1;
            console.log(x);
           jQuery(this).css("opacity", 0.5);
        }).mouseout(function(e) {
            this.width=myw;
            this.src=oin;
           jQuery(this).css("opacity", 1.0);
        });


    });

代码运行正常，但我想要做的是在3次鼠标移除（mouseenter）之后我想禁用mouseenter事件。我无法弄清楚如何解开它？

谢谢，吉姆

Answer 1

您应该在mouseout事件处理程序中移动unbind逻辑

    }).mouseout(function(e) {
        this.width=myw;
        this.src=oin;
        jQuery(this).css("opacity", 1.0);
        if(x == 3){
            $("img:odd").unbind("mouseenter");
            $("img:odd").unbind("mouseout");
        }
    });

在mouseenter handler上执行此操作可能更准确

    jQuery("img:odd").mouseenter(function(e) {
      //  oin="";
        console.log(e);
        console.log(this);
        console.log(this.src);
        oin=this.src;
        this.src="snowdrop.png";
        myw=this.width;
        this.width=100;
        x=x+1;
        console.log(x);
        jQuery(this).css("opacity", 0.5);
        if(x == 3){
            $("img:odd").unbind("mouseenter");
            $("img:odd").unbind("mouseout");
        }
    })

Answer 2

使用on()和off()，例如：

(function($) {
    var x=0,
        myw=0,
        oin="";

    $('img:odd').on({
        mouseenter: doStuff, //bind a function, it's easier to rebind
        mouseleave: function() {
           this.width=myw;
           this.src=oin;
           $(this).css("opacity", 1.0);
        }
    });


    function doStuff(e) {
        var elem = e.target;
        if (x>3) {
            $(elem).off('mouseenter'); //unbind the event
            return;
        }else{
            x++;
            oin=elem.src;
            elem.src="snowdrop.png";
            myw=elem.width;
            elem.width=100;
            $(elem).css("opacity", 0.5);
        }
    }
})(jQuery);

Answer 3

这是一个完美回答这个问题的问题：Best way to remove an event handler in jQuery?

以下是一个例子：

如果要添加单个事件然后将其删除（不删除任何可能已添加的其他事件），则可以使用事件命名空间：

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

并删除您的活动：

$('#myimage').unbind('click.mynamespace');

删除jQuery的事件处理程序

3 个答案: