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

})