我如何知道我使用 jQuery 单击了哪种类型的 HTML 对象?
例如,如果我单击按钮,那么它应该告诉我这是按钮对象或文本输入或文本区域......就像那样。
为什么我问这个问题?
因为我面临着这种类型的一个问题。
我有一个 Textarea,就在下面我有文件输入 HTML 对象。我已将 Caret 函数(返回 Textarea 中的当前光标位置)绑定到该 Textarea。但是当我点击浏览按钮上传文件时,它给了我一个错误。所以我想通过知道哪种类型的 HTML 对象来防止这种情况发生?
我如何知道我使用 jQuery 单击了哪种类型的 HTML 对象?
例如,如果我单击按钮,那么它应该告诉我这是按钮对象或文本输入或文本区域......就像那样。
为什么我问这个问题?
因为我面临着这种类型的一个问题。
我有一个 Textarea,就在下面我有文件输入 HTML 对象。我已将 Caret 函数(返回 Textarea 中的当前光标位置)绑定到该 Textarea。但是当我点击浏览按钮上传文件时,它给了我一个错误。所以我想通过知道哪种类型的 HTML 对象来防止这种情况发生?
在点击事件中
function(e){
var type=$(this).prop('tagName'); // I think it will need jQuery >1.6
// or
var type=$(this)[0].tagName;
}
实际上,过去有很多关于这个问题的帖子。
好吧,您可以使用 attr("tagName") 它将返回标签的名称。
示例代码片段:假设您单击某个 id 为 #myId 的元素,然后绑定单击事件并获取 attr("tagName") (jQuery方式)
$('#myId').on('click', function(){
console.log($(this).attr('tagName'));
});
这应该会有所帮助。
您还可以使用一些 DOM 属性来获取对象类型:
e.target.nodeName
或者
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);
});
$(e.target) - 包含用户点击的 DOM 元素。我们可以使用此对象来获取有关用户单击的对象的任何内容。
e.target 始终是被点击的顶部元素。因此,虽然屏幕上的每次点击在技术上都是点击主体,但 e.target 将始终返回树中占据点击区域的最远的子元素。但是,我们可能有多个绝对定位的元素占据同一区域。在这种情况下,将返回具有较高 z-index 的元素。
<!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>