单个元素上的两个函数;第二次运行时先禁用,反之亦然

时间:2013-06-20 17:01:20

标签: jquery

帮我使用this fiddle

正如你在标题中看到的,我在一个元素上有两个函数,我想在另一个元素运行时禁用一个。

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

3 个答案:

答案 0 :(得分:1)

这是一个禁用事件处理程序的链接,希望这有帮助

Best way to remove an event handler in jQuery?

答案 1 :(得分:1)

user136etcetc提供了一个描述jQuery中事件命名空间的好链接。这是你的例子,在实践中使用命名空间:

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

答案 2 :(得分:0)

我认为您不能禁用事件处理程序,但您可以将变量设置为要执行的函数的名称,然后在每个函数中对其进行测试并相应地执行操作。

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

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

使用$(selector).off()实际上删除了单击处理程序。如果你想使用它,那么你将不得不在两个事件处理程序之间切换。

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