点击元素类型

好了，所以我基本上是试图隐藏指定的元素，当有人点击的形式之外，但问题是，没有什么实际工作点击元素类型

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

基本上我收到输出是“表不点击”

来源

2017-02-17 Miki Liki

您可以发布您的HT ml代码，以便我们可以检查 –

'event.target'不是一个字符串，因此'event.target ===“form”'将始终为false。您需要检查元素名称，或者将其与实际的DOM元素进行比较。要获取元素的标签名称，请使用'event.target.tagName.toLowerCase（）'....或者因为您使用jQuery，请使用'.is（）'方法...'$（event.target）。就是（ '形式'）'。 –

乔希是对的，如果你想自己检查它然后尝试console.log（e.target）; – kdyz

$（ “正文”）。单击（函数（e）中{

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

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

} else { 

    console.log("overlayBG is clicked"); 

}

}）;

来源

2017-02-17 04:47:50

正如我在评论中提到：

您是对象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..."); 
    } 
});

来源

2017-02-17 04:49:38

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

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

来源

2017-02-17 04:52:28 kdyz

点击元素类型

回答

相关问题