Question

我有以下HTML：

<input type="text" id="myText">
<div id="myDiv">

当用户从文本字段中聚焦时，我想删除#myDiv，仅当用户聚焦到不在DIV本身的区域时。

到目前为止，无论用户点击屏幕的位置，我都有删除div的代码。如果用户在其中单击，我需要添加到以下代码中以防止删除div？

$("#myText").focusout(function(evt) {
    $("#myDiv").remove();
});

Answer 1

这就是你要找的东西。触发blur事件时，您可以访问已聚焦的元素，然后可以检查元素的ID以查看它是否与div上的id匹配。如果不匹配，则删除div。

$("#myText").blur(function(e){    
  var target = e.originalEvent.explicitOriginalTarget||document.activeElement;

  if ($(target).closest("#myDiv").length == 0 && target.id != "myDiv")
    $("#myDiv").remove();
});

这是我在jsbin上放在一起的一个简单示例：http://jsbin.com/iwari3/10 如果您正在寻找，请告诉我

<强>更新由于原始版本在Chrome中不起作用，我决定采用不同的方法，似乎在IE / FF / Chrome中工作。

var $myDiv = $("#myDiv"),
    $myText = $("#myText");

 $myText.blur(function(e){        
    if (!$myDiv.data("focused"))
      $myDiv.remove();

    $myDiv.data("focused", false);
 });

 $myDiv.mousedown(function(e){
    $(this).data("focused", true)
 });

这个新方法现在将在mousedown上的#myDiv上存储一个焦点位，它会在blur事件之前被触发。在文本框的模糊中，我们检查是否设置了焦点位。然后将聚焦位重置为false以处理文本框被多次单击和退出的情况。

以下是更新的jsbin.com示例：http://jsbin.com/iwari3/11

Answer 2

你可以有一个带有标志值的隐藏字段。

单击div内部的

将隐藏字段值设置为1。

你应该在调用remove（）;

之前执行此操作

在调用div之前检查此标志并删除。

删除后取消设置标志

聚焦时有条件的移除

2 个答案: