オブジェクトをクリックするとmouseleaveが停止する

Question

divにマウスを合わせると、要素が表示され、マウスが離されると要素が消えます。

マウスの内側にクリック機能があり、クリックするとドロップダウンメニューが表示されます。

マウスを離してもドロップダウンメニューと要素をアクティブにしたい。だから私はクリックイベントがあるとき、この状況ではマウスレーブを適用しないようにします。ユーザは要素を再びクリックするか、ページ上の任意の場所をクリックして要素を作成し、ドロップダウンメニューを消さなければなりません。

しかし、私はmouseleave関数を動作させたいので、ユーザーのmouseenters divの場合、要素が表示され、再びそれをクリックすることができます。

は、私は現在、このようなものを持っていますが、私はクリックしたときにmouseleaveが適用されないために作る方法を知らない

$(".div").mouseenter(function(){ 
    $(".element",this).show(); 
    $(".element").click(function(){ 
     $(".dropdown").show(); 
     return false; 
    }); 
}).mouseleave(function(){ 
    $(".element",this).hide(); 
}); 

EDIT：

HTML

<div class='div'> 
    <div class='element' style='display:none;'> 
     boxed element 
    </div> 
    <div class='dropdown' style='display:none;'> 
     menu 
    </div> 
</div> 

Answer 1

アイテムをクリックしたときにマークするカスタム属性を設定できます。 mouseleaveイベントハンドラは、要素を非表示にする前にこのカスタム属性の値をチェックできます。以下のような

すなわち何か：

$(".div").mouseenter(function(){ 
    $(".element",this).show(); 
    $(".element").click(function(){ 
     $(".dropdown").show(); 

     // set custom attribute for marking this one as clicked 
     $(this).attr('clicked', 'yes'); 

     return false; 
    }); 
}).mouseleave(function(){ 

    // check custom attribute before hiding the element 
    if($(this).attr('clicked') != 'yes') { 
     $(".element",this).hide(); 
    } 

}); 

Answer 2

することができますこれを使用する場合、jQueryの新しいオン/オフメソッドを使用してください。1.7+

次のようなものです：

$(".div").on('mouseenter', function(){ 
    showElm(); 
    $(".element").click(function(){ 
     $(".div").off('mouseleave', hideElm); 
     $(".dropdown").show(); 
     return false; 
    }); 
}); 

$(".div").on('mouseleave', hideElm); 
$(document).on('click', hideElm); 

function hideElm() { $(".element, .dropdown").hide(); } 
function showElm() { $(".element").show(); } 

フィドル：http://jsfiddle.net/fSjtm/

は、おそらくいくつかのtweekingを必要としますが、それはあなたの一般的なアイデアを与えるだろう。

Answer 3

は、これは私のためのトリック

$("#id").click(function(){ 
    $("#id").off("mouseleave"); 
}); 

Answer 4

使用するevent.stopPropagationを（）やりました。

あなたは要素

$(".div").on('mouseenter', function(){ 
 
    showElm(); 
 
    $(".element").click(function(event){ 
 
     $(".div").off('mouseleave', hideElm); 
 
     $(".dropdown").show(); 
 
     event.stopPropagation(); 
 
    }); 
 
}); 
 

 
$(".div").on('mouseleave', hideElm); 
 
$(document).on('click', hideElm); 
 

 
function hideElm(event) { $(".element, .dropdown").hide(); } 
 
function showElm(event) { $(".element").show(); }

.element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; } 
 
.dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='div'>HERE 
 
    <div class='element'> 
 
     boxed element 
 
    </div> 
 
    <div class='dropdown'> 
 
     menu 
 
    </div> 
 
</div>

Answer 5

それはあなたが、カスタムjQueryのクリックではなく、元のMouseEventによってトリガーされる参照mouseLeaveイベントを思わ上のリンクを使用することができますので、これは良いです。私はそのない正しいアプローチを感じる

$(".div").on('mouseenter', function(){ 
    $(".element").on('click', function(){ ... }); 
}); 

$(".div").on('mouseleave', function(event){ 
    if(typeof(e.originalEvent) != 'undefined'){ 
     // only when mouseleave is the original event. 
    } 
});