确定被点击的目标是否是特定类的元素的事件监听器

我希望能够区分用户是否单击具有某个类（或该类的子元素，如段落）的元素，或者用户点击页面中的其他地方。我使用jQuery来查看事件目标是否是特定类的元素，但由于某种原因，这不起作用。当元素被点击时它不会注册。你能看到问题出在哪里吗？（看在浏览器中检查控制台日志消息）确定被点击的目标是否是特定类的元素的事件监听器

见Fiddle

这里是小提琴代码：

HTML：

<div class="redsquare"><p>red square</p></div> 
<div class="redsquare"><p>red square</p></div>

CSS

.redsquare { 
    width: 100px; 
    height: 100px; 
    background: red; 
    margin-bottom: 10px; 
}

Javascript：

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

    }); 

});

来源

2017-07-31 Galivan

hasClass不应该下手点。它应该是hasClass（红色方块） – error404

http://api.jquery.com/hasClass/ – leaf

jQuery的.hasClass()不要求您在类名前加一个点。给.hasClass('redsquare')一试。你可以阅读它here。

这是fiddle。

此外，检查元素是否具有该类并将其他情况保留在else块中会更直接。

来源

2017-07-31 19:35:39 yusif

-1

你的逻辑错了。你是说如果当前元素没有类，父类也没有类。这从来没有在你的HTML。

if (!$(event.target).hasClass('.redsquare') && 
!$(event.target.parentNode).hasClass('.redsquare'))

你可以尝试：

window.addEventListener('mouseup', function(event) { 
    if($(event.target).closest('.redsquare').length>0){ 
    console.log('target is in red square'); 
    }else{ 
    console.log('target is outside red square'); 
    } 
});

来源

2017-07-31 19:40:48 ChrisThompson

你错了，只要你在红色方块之外鼠标移动，条件就是真的。唯一的错误是在类名前加点。 – leaf

您可以使用此代码：

这里的工作演示：https://output.jsbin.com/xobafah

https://jsbin.com/xobafah/edit?html,css,js

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>

的JavaScript

$(function() { 

    $(document).mouseup(function(e) 
    { 
     var container = $(".redsquare"); 
     // if the target of the click isn't the container nor a descendant of the container 
     if (!container.is(e.target) && container.has(e.target).length === 0) 
     { 
      console.log('target is outside red square'); 
     } 
     else{ 
      console.log('target is red square'); 
     } 
    }); 

});

来源

2017-07-31 19:41:11

使用event.target.className获取类名。

$(function() { 
 

 
    window.addEventListener('mouseup', function(event) { 
 
    if (event.target.className != 'redsquare') { 
 

 
     console.log('target is outside red square'); 
 
    } else { 
 
     console.log('target is red square'); 
 
    } 
 
    }); 
 

 
});

.redsquare { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="redsquare">red square</div> 
 
<div class="redsquare">red square</div>

来源

2017-07-31 19:49:53

在你的类名中删除点，并预期它会工作：

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

    }); 

});

https://jsfiddle.net/bzp0ef9k/1/

来源

2017-07-31 19:53:59 kawnah

确定被点击的目标是否是特定类的元素的事件监听器

回答

相关问题