Javascript 事件侦听器,以确定单击的目标是否是特定类的元素
我希望能够区分用户是否单击了具有特定类的元素(或该类的子元素,如段落),或者用户是否单击了页面中的其他任何位置。我使用jQuery查看事件目标是否是特定类的元素,但由于某些原因,这不起作用。单击元素时,它不会注册。你能看到问题出在哪里吗?(在浏览器检查器中查找控制台日志消息) 看 下面是小提琴中的代码: HTML: Javascript:Javascript 事件侦听器,以确定单击的目标是否是特定类的元素,javascript,jquery,html,Javascript,Jquery,Html,我希望能够区分用户是否单击了具有特定类的元素(或该类的子元素,如段落),或者用户是否单击了页面中的其他任何位置。我使用jQuery查看事件目标是否是特定类的元素,但由于某些原因,这不起作用。单击元素时,它不会注册。你能看到问题出在哪里吗?(在浏览器检查器中查找控制台日志消息) 看 下面是小提琴中的代码: HTML: Javascript: $(function() { window.addEventListener('mouseup', function(event) { if
$(function() {
window.addEventListener('mouseup', function(event) {
if (!$(event.target).hasClass('.redsquare') && !$(event.target.parentNode).hasClass('.redsquare')) {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});
jQuery的.hasClass()
不要求在类名前面加点。
尝试一下.hasClass('redsquare')
。你可以读到它
这是一个例子
此外,检查元素是否具有该类,并将另一个大小写保留在else块中,这将更为简单。jQuery的.hasClass()
不要求在类名前面加点。
尝试一下.hasClass('redsquare')
。你可以读到它
这是一个例子
此外,检查元素是否具有该类,并将另一个大小写保留在else块中,这将更为简单。您可以使用以下代码:
以下是工作演示:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="redsquare">red square</div>
<div class="redsquare">red square</div>
</body>
</html>
您可以使用以下代码:
以下是工作演示:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="redsquare">red square</div>
<div class="redsquare">red square</div>
</body>
</html>
使用event.target.className获取类名
$(函数(){
window.addEventListener('mouseup',函数(事件){
if(event.target.className!=“redsquare”){
console.log('目标在红场之外');
}否则{
console.log('目标是红方块');
}
});
});代码>
.redsquare{
宽度:100px;
高度:100px;
背景:红色;
边缘底部:10px;
}
红场
红方块
使用event.target.className获取类名
$(函数(){
window.addEventListener('mouseup',函数(事件){
if(event.target.className!=“redsquare”){
console.log('目标在红场之外');
}否则{
console.log('目标是红方块');
}
});
});代码>
.redsquare{
宽度:100px;
高度:100px;
背景:红色;
边缘底部:10px;
}
红场
红方块
删除类名中的点,它将按预期工作:
$(function() {
window.addEventListener('mouseup', function(event) {
if (!$(event.target).hasClass('redsquare') && !$(event.target.parentNode).hasClass('redsquare')) {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});
删除类名中的点,它将按预期工作:
$(function() {
window.addEventListener('mouseup', function(event) {
if (!$(event.target).hasClass('redsquare') && !$(event.target.parentNode).hasClass('redsquare')) {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});
hasClass不应该以点开头。它应该是hasClass(红色方块),hasClass不应该以点开头。它应该是hasClass(红色方块)
$(function() {
window.addEventListener('mouseup', function(event) {
if (!$(event.target).hasClass('redsquare') && !$(event.target.parentNode).hasClass('redsquare')) {
console.log('target is outside red square');
} else {
console.log('target is red square');
}
});
});