How Store and Disable Event of another element Temporary

Question

I am looking for a way to manage the events. I have a hover function for element A, and click function for element B. I want to disable A`s hover function temporary while the second click of B.

I am looking for a way that not necessary to rewrite the hole function of A inside of B. Something very simply just like "Store and Disable Event, Call Stored Function"

I found some technique like .data('events') and console.log. I tired but failed, or maybe I wrote them in a wrong way.

Please help and advice!

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

Try this

 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

You could try having a variable that is outside the scope of functions a and b, and use that variable to trigger the action to take in function b on function 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
    }
}

Without knowing more about what you're trying to do, I'd try something similar to this.

Answer 3

There are provably better ways to do it, but this works fine, on document ready do this:

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

It sounds like you want to disable the click hover event for A if B is clicked.

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

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

You can use the jQuery off method, have a look at this fiddle. http://jsfiddle.net/nKLwK/1/

Answer 5

Define a function to assign to hover on A element, so in b click, call unbind('hover') for A element and in second click on b element define again a function to hover, like this:

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

You can use .off function from jQuery to unbind the hover on your "a" element.

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

Live demo available here : http://codepen.io/joe/pen/wblpC

Answer 7

I think that what you want to do is something like this (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

But there are a couple of things that you must have in consideration:

• This will only work if you add the events with JQuery, because JQuery keeps an internal track of the event handlers that have been added.
• Each version of JQuery handles data("events") differently, that means that this code may not work with other version of JQuery.

I hope that this helps.

EDIT:

data("events") was an internal undocumented data structure used in JQuery 1.6 and JQUery 1.7, but it has been removed in JQuery 1.8. So in JQuery 1.8 the only way to access the events data is through: $._data(element, "events"). But keep in mind the advice from the JQuery documentation: this is not a supported public interface; the actual data structures may change incompatibly from version to version.