Question

我有一个具有多个类名的元素，我不能为此元素使用ID。我想在单击元素或单击任何其他内容时触发单独的事件。现在，当我单击该元素时，由于多个类名，将触发单击其他任何内容的事件。我怎么解决这个问题？我打算使用JQuery。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1></h1>
    <div class="stack a b c">
        1
    </div>
    <div class="stack a b c">
        2
    </div>    
<script src="js/jquery-1.9.1.js"></script>      
<script>        
$('.a').click(function() {
  console.log("stack clicked");
});

$("html:not(.stack, .a, .b, .c)").click(function() {
  console.log("other clicked");
});

</script>    
<style>    
    .stack{
        width:100px;
        height:100px;
        background-color:red;
        border:1px solid black;    
    }    
</style>
</body>
</html>

Answer 1

当html元素

时，排除html元素

使用CSS选择器：

$("html:not(.stack),html:not(.a),html:not(.b),html:not(.c)").click(function() { console.log("other clicked"); });

或者使用jQuery：

$("html").not(".stack, .a, .b, .c").click(function() { console.log("other clicked"); });

当html元素具有所有这些类
时，将其排除

使用CSS选择器，关于这个问题的坏处是你必须尝试每个顺序的所有类组合，所以最好使用jQuery：

$('html:not([class="stack a b c"])').click(function() { console.log("other clicked"); });

或者使用jQuery：

$("html").not(".stack.a.b.c").click(function() { console.log("other clicked"); });

Answer 2

html:not(...会选择html这个没有任何类的标记。要监听任何内部元素，只需使用:not()伪类。虽然使用event.stopPropagation来防止事件冒泡到DOM树。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>H</h1>
<div class="stack a b c">
  1
</div>
<div class="stack a b c">
  2
</div>


<script>
  $('.a').click(function(e) {
    e.stopPropagation();
    console.log("stack clicked");
  });

  $(":not(.stack.a.b.c)").click(function(e) {
    e.stopPropagation();
    console.log("other clicked");
  });
</script>

<style>

Answer 3

这是我根据答案使用的。

$('.a').click(function(e) {
    e.stopPropagation();
  console.log("stack clicked");
});

$('html').click(function(e) {
    console.log("other clicked");
});

使用html：当元素有多个类时

3 个答案: