Щелкнув элемент типа

Question

Хорошо, так что я в основном пытаются скрыть указанный элемент, когда кто-то щелкает за пределами формы, но проблема, ничего на самом деле не работает

$("#overlayBG").click(function(e) { 
    if(e.target === "form") { 
     $("#overlayBG").hide(); 
    } else { 
     console.log("Form not clicked"); 
    } 
}); 

В принципе выход я получаю «Форма не нажата»

Answer 1

$ ("тело") .click (функция (е) {

if (e.target.id != "overlayBG") { 

    $("#overlayBG").hide(); 

} else { 

    console.log("overlayBG is clicked"); 

} 

});

Answer 2

Как я уже говорил в комментариях:

Вы сравниваете объект event.target в строку. Поэтому event.target === "form" всегда будет ложным. Вам нужно либо проверить имя элемента, либо сравнить его с фактическим элементом DOM.

Например, чтобы получить имя тега элемента, используйте event.target.tagName.toLowerCase(). С другой стороны, так как вы используете JQuery, вы можете использовать .is() method:

$("#overlayBG").click(function(event) { 
    if (!$(event.target).is('form')) { 
    $("#overlayBG").hide(); 
    } else { 
    alert("The form was clicked..."); 
    } 
}); 

Однако, это будет только проверить, если event.target является form элемент (который не будет работать при нажатии на дочерние элементы вида). Поэтому вы должны пройти через DOM и проверить, если ближайший предок элемент является form элементом:

Updated Example

$("#overlayBG").click(function(event) { 
    if (!$(event.target).closest('form').length) { 
    $("#overlayBG").hide(); 
    } else { 
    alert("The form was clicked..."); 
    } 
}); 

Кроме того, если вы хотите слушать все кликов:

Updated Example

$(document).on('click', function(event) { 
    if (!$(event.target).closest('#overlayBG form').length) { 
    $("#overlayBG").hide(); 
    } else { 
    alert("The form was clicked..."); 
    } 
}); 

Answer 3

Fiddle

Что я обычно делаю, так это то, что я получаю идентификатор цели и использую это как свою контрольную точку.

HTML

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

<div id="overlayBG"> 
    <form method="POST"> 
    <input type="text" placeholder "some text..." /> 
    </form> 
</div> 

CSS

#overlayBG { 
    width: 500px; 
    height: 500px; 
    background-color: red; 
} 

form { 
    width: 50%; 
    height: 50%; 
    background-color: blue; 
} 

JS

$("#overlayBG").click(function(e) { 
    var id = $(this).attr('id'); 
    if (id === "overlayBG") { 
    $("#overlayBG").hide(); 
    } else { 
    alert("Form not clicked"); 
    } 
}); 

Вот ключевая вещь

var id = $(this).attr('id'); //Get id of the clicked element 
     if (id === "overlayBG") { //Check if the id is what you're looking for 
     $("#overlayBG").hide(); 
     }