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

工作的小提琴會更好地為所有人提供幫助。

這是一個應該為您提供幫助的工作示例：

 // open the form $('.modify').on('click', function(e) { $(this).parent().find('.dialog').fadeIn(); }); // close the form (button inside form) $('.close').on('click', function(e) { $(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> 

Answer 3

mouseleave不會對單擊做出反應，而是對當前指針位置做出反應。 您必須將click（鼠標按下）監聽器添加到例如文檔中，以監聽外部的click事件