Question

好吧所以我基本上试图隐藏指定的元素，当有人点击表单外但问题是，没有任何实际工作

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

基本上我得到的输出是“Form not clicked”

Answer 1

$（＆＃34; body＆＃34;）。click（function（e）{

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

我通常做的是获取目标的ID并将其作为我的参考点。

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

单击元素类型

3 个答案: