Question

我如何知道我使用jQuery点击了哪种类型的HTML对象？

例如，如果我点击Button然后它应该通知我这是按钮对象或文本输入或Textarea ......就像那样。

为什么我问这个问题？

因为我正面临这种类型的问题。

我有一个Textarea，就在下面我有文件输入HTML对象。我已将Caret函数（将Textarea中的当前光标位置返回）绑定到该Textarea。但是，当我点击“浏览”按钮上传文件时，它会给我一个错误。所以我想通过知道哪种类型的HTML对象来防止这种情况？

Answer 1

你可以这样做

$(".myBtn").click(function(){

       alert($(this).prop("tagName"));

});

更新

这是一个demo fiddle

Answer 2

单击事件中的

function(e){
    var type=$(this).prop('tagName'); // I think it will need jQuery >1.6
    // or
    var type=$(this)[0].tagName;
}

实际上，过去有很多关于这个问题的帖子。

Answer 3

你可以使用attr（“tagName”）来返回标签的名称。

示例代码段：假设您单击一个id为#myId的元素然后绑定click事件并获取attr（“tagName”）（jQuery方式）

$('#myId').on('click', function(){
  console.log($(this).attr('tagName'));
});

这应该有所帮助。

Answer 4

demo

$(this).attr("tagName")

或可以使用

 $(this).prop('tagName');

参考 attr 和 prop

Answer 5

<!doctype html>
<html lang="en">
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body> 
<div id="log"></div>
<input type="button" id="myButton" value="Button">
<input type="submit" id="myButton" value="submit">
<input type="text" id="myButton" value="text">
<input type="date" id="myButton" value="date">
<textarea>Test</textarea>
<script>
$("input, textarea").on('click', function (e) {
    $( "#log" ).html( "clicked: " + event.target.nodeName + " Type: " + this.type);
});
</script>
</body>
</html>

Answer 6

$（e.target） - 包含点击的DOM元素用户。我们可以使用这个对象获取任何关于对象用户的所有信息。

e.target始终是点击的顶级元素。因此，当屏幕上的每次点击都是技术上点击正文时，e.target将始终返回占据点击区域的树中最远的子元素。但是，我们可能有多个绝对定位的元素占据相同的区域。在这种情况下，将返回具有更高z-index的元素。

Answer 7

您还可以使用某些DOM属性来获取对象类型：

e.target.nodeName

OR

e.target.tagName

例如：

HTML -

<input class="Track" type="button" value="Submit" />
 <button class="Track">Submit</button>

Jquery -

$('.Track').click(function (e) {
   alert("Object: " + e.target.nodeName + " Type: " + e.target.type);            
});

Try This

如何知道哪种类型的Html对象正在使用jQuery click事件？

7 个答案:

更新