Question

我正在寻找一种管理事件的方法。我有一个元素A的悬停函数，并单击元素B的函数。我想在第二次单击B时暂时禁用A的悬停函数。

我正在寻找一种不必重写B内部A的孔函数的方法。非常简单就像“存储和禁用事件，调用存储函数”

我发现了一些像.data（'events'）和console.log这样的技术。我累了但失败了，或者我写错了。

请帮助和建议！

$(A).hover();

$(b).click( 

     if($.hasData($(A)[0])){   // if A has event,
             //STORE all the event A has, and disable
     }else{
            //ENABLE the stored event for A
     }
 );

Answer 1

试试这个

 var hoverme = function() {
    alert('Hover Event Fired');
};

$('.A').hover(hoverme);

var i = 0;

$('.B').on('click', function(){
    if(i%2 === 0){
        // Unbind event
        $('.A').off('hover');
    }
    else{
        // Else bind the event
        $('.A').hover(hoverme);
    }
    i++;
});

<强> Check Fiddle

Answer 2

您可以尝试使用超出函数a和b范围的变量，并使用该变量触发动作以在函数a中获取函数b。

var state;
var a = function() {
    if(!state) {
        state = true; 
        // Add hover action and other prep. I'd create a third function to handle this.
    console.log(state);
};
var b = function() {
    if(state) {
        state = false;
        // Do unbinding of hover code with third function.
    } else {
        state = true;
        // Do whatever else you needed to do
    }
}

如果不了解您正在尝试做的事情，我会尝试类似的事情。

Answer 3

有更好的方法可以做到这一点，但这很好，在文档就绪时这样做：

$("#a")[0].active=false;

$("#b").click(function(){
    $("#a")[0].active = ($("#a")[0].active)==false;
    if($("#a")[0].active){
        $("#a").hover(function(){alert("test")});
    }else{
        $("#a").off('hover');
    }
});

JSFiddle example

Answer 4

如果单击B，听起来好像要禁用A的点击悬停事件。

$("body").on("hover", "#a", function(){
    alert("hovering");
});

$("#b").click( function(){
    $("body").off("hover", "#a", function() {
        alert("removed hovering");
    });
});

你可以使用jQuery off方法，看看这个小提琴。 http://jsfiddle.net/nKLwK/1/

Answer 5

定义一个要分配悬停在A元素上的函数，所以在b中单击，为A元素调用unbind（'hover'）并在第二个单击b元素时再次定义一个要悬停的函数，如下所示：

function aHover(eventObject) {
    // Todo when the mouse enter object. You can use $(this) here
}

function aHoverOut(eventObject) {
    // Todo when the mouse leave the object. You can use $(this) here
}

$(A).hover(aHover, aHoverOut);
// ...
$(b).click(function(eventObject) {
    if($.hasData($(A)[0])){   // if A has event,
         $(A).unbind('mouseenter mouseleave'); // This is because not a event hover, jQuery convert the element.hover(hoverIn, hoverOut) in element.bind('mouseenter', hoverIn) and element.bind('mouseleave', hoverOut)
    }else{
        $(A).hover(aHover, aHoverOut);
    }
});

Answer 6

你可以使用jQuery中的.off函数解除悬停在你的“a”元素上。

 function hoverA() {
  alert('I\'m on hover');  
}

$('#a').hover( hoverA );

var active = true;

$('#b').on('click', function(){
    if(active){
        $('#a').off('hover');
        active = false;
    } else{
        $('#a').hover(hoverA);
        active = true;
    }
});

现场演示：http://codepen.io/joe/pen/wblpC

Answer 7

我认为你想要做的就是这样（example for JQuery 1.7.2）：

$("#a").hover(function(){alert("test")});
$("#a")[0].active=true;

$("#b").click(function(){
    if($("#a")[0].active){
        $("#a")[0].storedEvents = [];
        var hoverEvents = $("#a").data("events").mouseover;
        jQuery.each(hoverEvents , function(key,handlerObj) {
            $("#a")[0].storedEvents.push(handlerObj.handler);
        });
        $("#a").off('hover');
    }else{
        for(var i=0;i<$("#a")[0].storedEvents.length;i++){
            $("#a").hover($("#a")[0].storedEvents[i]);
        }
    }
    $("#a")[0].active = ($("#a")[0].active)==false;
});

JSFiddle Example

但是你必须考虑以下几点：

这只有在使用JQuery添加事件时才有效，因为JQuery会保留已添加的事件处理程序的内部跟踪。
每个版本的JQuery以不同的方式处理data("events")，这意味着此代码可能无法与其他版本的JQuery一起使用。

我希望这会有所帮助。

修改

data("events")是JQuery 1.6和JQUery 1.7中使用的内部未记录的数据结构，但是it has been removed in JQuery 1.8。因此，在JQuery 1.8中，访问事件数据的唯一方法是：$._data(element, "events")。但请记住JQuery文档中的建议：这不是受支持的公共接口;实际数据结构可能会因版本不同而发生变化。

如何存储和禁用其他元素临时事件

7 个答案: