자바 스크립트에서 이벤트

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>