Two functions on a single element; disable first while second run and vice versa

Question

As you have seen in title I have two functions on a single element and I want to disable one while the other one runing.

function SetupClick() {
$("#Wp").toggle(function(){
    $("#Wp").animate({"width":"500"},"slow");
},function(){
    $("#Wp").animate({"width":"100"},"slow");
});
}

function SetupMouseover() {
$("#Wp").mouseenter(function(){
    $("#Wp").animate({"width":"500"},"slow");
        });
            $("#Wp").mouseout(function(){
    $("#Wp").animate({"width":"100"},"slow");
        });
}

$('#Ck').click(function() {
  SetupClick();
  // Optionally, save choice
  localStorage['userchoice'] = 'click';
});
$('#Me').click(function() {
  SetupMouseover();
  // Optionally, save choice
  localStorage['userchoice'] = 'mouseover';
});

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Here is a link to disable an event handler, hope this helps

Best way to remove an event handler in jQuery?

edited May 23 '17 at 11:50

Community

1
1

answered Jun 20 '13 at 17:25

sferret

361
2
14

score 1 · Accepted Answer · answered Jun 20 '13 at 17:36

user136etcetc provided a good link describing event namespacing in jQuery. Here's your example, using namespacing in practice:

http://jsfiddle.net/4vST2/

var aniMinWidth = 100;
var aniMaxWidth = 500;

function SetupClick() {
    // Remove mouse events first
    $("#Wp").off("mouseout.bobsyouruncle");
    $("#Wp").off("mouseenter.bobsyouruncle");

    $("#Wp").on("click.bobsyouruncle", function() {
        var animateWidth = $(this).width() > aniMinWidth ? aniMinWidth : aniMaxWidth;

        $(this).animate({"width":animateWidth}, "slow");
    });  
}

function SetupMouseover() {
   // Remove click event first
  $("#Wp").off("click.bobsyouruncle");

  $("#Wp").on("mouseenter.bobsyouruncle", function(){
        $("#Wp").animate({"width":aniMaxWidth},"slow");
   });

   $("#Wp").on("mouseout.bobsyouruncle", function(){
        $("#Wp").animate({"width":aniMinWidth},"slow");
    });
}

$('#Ck').click(function() {
  SetupClick();
  // Optionally, save choice
  localStorage['userchoice'] = 'click';
});
$('#Me').click(function() {
  SetupMouseover();
  // Optionally, save choice
  localStorage['userchoice'] = 'mouseover';
});

But I have one last question. You must click one of those two buttons to choose how to react the div, but before that I wan't to make mouseenter the default. How can I do that? — Colin, Jun 20 '13 at 17:52
Using jQuery's page init binding, you would simply call SetupMouseover(). See the addition at http://jsfiddle.net/4vST2/1/ — zincorp, Jun 20 '13 at 17:54

Mark Anderson · Answer 3 · 2013-06-20T17:39:42.457

I don't think you can disable an event handlers, but you could set a variable to the name of the function that you want to execute and then test for it in each of the functions and act accordingly.

var MYNAMESPACE = {}
MYNAMESPACE.activeFunction = 'click'

function SetupMouseover() {
  if MYNAMESPACE.activeFunction != 'mouseover') {return}
  // rest of code here
}

Using $(selector).off() actually removes the click handler. If you want to use that, then you will have to toggle between the two event handlers.

MYNAMESPACE.toggleHandlers = function(h) {
  if (h === 'click') {
    removeMouseover();
    SetupClick();
  }
  else if (h === 'mouseover') {
    removeClick();
    SetupMouseover();
  }
}

Please modify the fiddle and give me the link. I can't understand. — Colin, Jun 20 '13 at 17:38

Two functions on a single element; disable first while second run and vice versa

3 Answers3