2

我正在寻找一种管理事件的方法。我有元素 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
     }
 );
4

7 回答 7

2

尝试这个

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

检查小提琴

于 2012-12-31T01:41:05.143 回答
1

您可以尝试使用函数 a 和 b 范围之外的变量，并使用该变量触发函数 b 对函数 a 执行的操作。

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
    }
}

在不了解您要做什么的情况下，我会尝试类似的事情。

于 2012-12-31T01:35:05.770 回答
1

可以证明有更好的方法可以做到这一点，但这工作正常，在准备好文档时这样做：

$("#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 示例

于 2012-12-31T01:42:22.253 回答
1

如果单击 B，听起来您想禁用 A 的单击悬停事件。

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

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

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

于 2012-12-31T01:42:34.983 回答
1

定义一个函数以分配给悬停在 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);
    }
});
于 2012-12-31T01:45:00.493 回答
1

您可以使用 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

于 2012-12-31T01:52:39.817 回答
1

我认为您想要做的是这样的（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 示例

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

  • 这仅在您使用 JQuery 添加事件时才有效，因为 JQuery 会在内部跟踪已添加的事件处理程序。
  • 每个版本的 JQuery 处理data("events")方式不同，这意味着此代码可能不适用于其他版本的 JQuery。

我希望这个对你有用。

编辑：

data("events")是用于 JQuery 1.6 和 JQUery 1.7 的内部未记录数据结构，但已在 JQuery 1.8 中删除。所以在 JQuery 1.8 中访问事件数据的唯一方法是通过：$._data(element, "events"). 但请记住 JQuery 文档中的建议：这不是受支持的公共接口；实际数据结构可能因版本而异。

于 2012-12-31T03:37:49.420 回答