JavaScriptのイベント

Question

をクリックすると、のフォームを開きます。フォームの外をクリックするとフォームが消えてしまいます。私はそれのためにmouseleaveイベントを使用すると、フォームが開いていると自動的に閉じていると私はフォームを記入していないです。私はここでどのイベントを使うのか分からない。

JS

$(document).ready(function() { 
    $("#div1").load("compare-form-site.html"); 
}); 

$(".m-search").click(function() { 
    $("#modify").show("blind",700); 
    $("#bank").hide(); 
    $(".slider").hide(); 
    $("#type").hide(); 
    $("#sort").hide(); 
}); 

$(".m-search").mouseleave(function(){ 
    $('#modify').hide(); 
}); 

HTML

<ul> 
    <li class="m-search"> 
     Modify Search 
     <i class="fa fa-search-plus" aria-hidden="true"> 
     </i> 
     <div id="modify" class="modify"> 
      <div id="div1"> 
      </div> 
     </div> 
    </li> 
    </ul> 

Answer 1

あなたがターゲット要素に比較して、フォームの外またはそれをクリックすると確認することができます。私は外にしてフォームを隠す。

$(document).on('click', function(e){ 
var $target = $('.modify'); 
if($target.is($(e.target)) && !$trigger.has(e.target).length) { 

    $('.modify').hide(); 
} 

}) 

Answer 2

mouseleaveはクリックでは反応しませんが、現在のポインタの位置にあります。あなたはクリック（mousedown）リスナーをたとえばに追加する必要があります。外部のクリックイベントを聴くための文書

Answer 3

すべての人があなたを助けるのに役立つでしょう。 ！

// open the form 
 
$('.modify').on('click', function(e) { 
 
\t $(this).parent().find('.dialog').fadeIn(); 
 
}); 
 

 
// close the form (button inside form) 
 
$('.close').on('click', function(e) { 
 
\t $(this).parents('.dialog').fadeOut(); 
 
}); 
 

 
// hide the form if you click outside the form 
 
$(document).mouseup(function (e) { 
 
    var container = $(".dialog"); 
 
    if (!container.is(e.target) && container.has(e.target).length === 0) { 
 
     container.hide(); 
 
    } 
 
});

ul li button { 
 
    display: block; 
 
} 
 

 
.dialog { 
 
    display: none; 
 
    position: absolute; 
 
    top: 10%; 
 
    bottom: 10%; 
 
    left: 10%; 
 
    right: 10%; 
 
    background: blue; 
 
} 
 

 
.dialog .close { 
 
    float: right; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li> 
 
    Modifiy Search 
 
    <button class="modify">Test</button> 
 
    <div class="dialog"> 
 
     <span class="close">Close me</span> 
 
     Im a test dialog 
 
    </div> 
 
    </li> 
 
</ul>