我有一个具有多个类名的元素，但无法为此元素使用 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>
最佳答案
- 当 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");
});
关于javascript - 使用html :not when element has multiple classes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41463490/