如何存储和禁用另一个元素的临时事件

How Store and Disable Event of another element Temporary

本文关键字：元素 另一个 事件 何存储 存储      更新时间：2023-09-26

我正在寻找一种方法来管理事件。我有元素a的悬停功能，并单击元素b的功能。我想暂时禁用a的悬停功能，而第二次单击b

我正在寻找一种不需要重写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
     }
 );

试试这个

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

检查小提琴

我认为你应该这样做(以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文档中的建议:这不是一个受支持的公共接口;

您可以尝试在函数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
    }
}

如果不知道你想做什么，我也会尝试类似的事情。

如果单击B，则要禁用单击悬停事件。

$("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/

定义一个函数来指定悬停在a元素上，所以在b点击，调用unbind('hover')为a元素，在第二点击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);
    }
});

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

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

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

相关文章：