2

イベントを管理する方法を探しています。要素Aのホバー機能と、要素Bのクリック機能があります。Bの2回目のクリック中に、Aのホバー機能を一時的に無効にします。

Aの穴関数をBの内側に書き直す必要がない方法を探しています。「イベントの保存と無効化、ストアド関数の呼び出し」のような非常に単純な方法を探しています。

.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の範囲外の変数を試して、その変数を使用して、関数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
    }
}

あなたが何をしようとしているのかをもっと知らずに、私はこれに似た何かを試みます。

于 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メソッドを使用できます、このフィドルを見てください。http://jsfiddle.net/nKLwK/1/

于 2012-12-31T01:42:34.983 に答える
1

A要素のホバーに割り当てる関数を定義します。したがって、bクリックでA要素のunbind（'hover'）を呼び出し、b要素の2回目のクリックで、次のようにホバーする関数を再度定義します。

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")JQuery1.6およびJQUery1.7で使用されていた、文書化されていない内部データ構造でしたが、JQuery1.8では削除されました。したがって、JQuery 1.8では、イベントデータにアクセスする唯一の方法は次の方法です$._data(element, "events")。ただし、JQueryドキュメントからのアドバイスに注意してください。これはサポートされているパブリックインターフェイスではありません。実際のデータ構造は、バージョンごとに互換性がないように変更される可能性があります。

于 2012-12-31T03:37:49.420 に答える