通过在单击元素时添加类名并在外部单击时删除来切换类(1)

📌 相关文章

📜 通过在单击元素时添加类名并在外部单击时删除来切换类(1)

📅 最后修改于: 2023-12-03 15:42:01.480000 🧑 作者: Mango

通过在单击元素时添加类名并在外部单击时删除来切换类

在web开发中，我们通常需要控制页面中某个元素的类名，以便实现一些特定的效果或交互。其中，一个常见的需求就是需要在用户单击该元素时，添加一个特定的类名，以表示该元素处于一种特定的状态，此时重新单击该元素会将该特定的类名移除。

这个需求可以通过JavaScript来实现，具体的思路是通过事件监听器来控制特定元素的类名。我们可以通过在单击元素时添加类名，并在外部单击时删除来切换元素的类名，实现该需求。

以下是一个简单的示例程序，说明如何使用JavaScript来实现该需求：

<!DOCTYPE html>
<html>
<head>
	<title>Toggle Class Demo</title>
	<style>
		.active {
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="my-div" class="clickable">Click Me</div>
	<script>
		document.addEventListener('click', function(event) {
			if (!event.target.matches('#my-div')) {
				var elem = document.querySelector('#my-div');
				elem.classList.remove('active');
			}
		});

		document.querySelector('#my-div').addEventListener('click', function(event) {
			var elem = event.target;
			elem.classList.toggle('active');
			event.stopPropagation();
		});
	</script>
</body>
</html>

解释：

我们首先定义了一个可以点击的div元素，并给该元素添加了一个可点击类名'clickable'。
然后，在页面的底部，我们添加了一个事件监听器：

document.addEventListener('click', function(event) {
  if (!event.target.matches('#my-div')) {
    var elem = document.querySelector('#my-div');
    elem.classList.remove('active');
  }
});

该事件监听器会在用户在页面上单击任何其他地方时触发。如果用户单击元素外的任何部分，则会将该特定元素的类名 'active' 移除。这是通过在特定元素上添加事件监听器来实现的，我们在特定元素上触发该事件，但将'event.stopPropagation()'添加到该元素的onclick侦听器中，以防止事件冒泡到文档对象并触发文档对象上的事件。这就确保了只要在特定元素外单击，事件监听器就会执行。

我们还添加了一个单击侦听器到特定元素的onclick事件中：

document.querySelector('#my-div').addEventListener('click', function(event) {
  var elem = event.target;
  elem.classList.toggle('active');
  event.stopPropagation();
});

此单击侦听器将添加或删除类名 'active'，具体取决于特定元素当前是否具有该类名。

这个简单的代码片段就是通常在面对该需求时，我们所需要的。当用户单击特定元素时，会添加类名 'active'，并附加相应样式，而当用户再次单击该元素或在该元素外单击时，类名 'active' 将被删除。

Markdown代码片段

# 通过在单击元素时添加类名并在外部单击时删除来切换类

在web开发中，我们通常需要控制页面中某个元素的类名，以便实现一些特定的效果或交互。其中，一个常见的需求就是需要在用户单击该元素时，添加一个特定的类名，以表示该元素处于一种特定的状态，此时重新单击该元素会将该特定的类名移除。

这个需求可以通过JavaScript来实现，具体的思路是通过事件监听器来控制特定元素的类名。我们可以通过在单击元素时添加类名，并在外部单击时删除来切换元素的类名，实现该需求。

以下是一个简单的示例程序，说明如何使用JavaScript来实现该需求：

```html
<!DOCTYPE html>
<html>
<head>
	<title>Toggle Class Demo</title>
	<style>
		.active {
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="my-div" class="clickable">Click Me</div>
	<script>
		document.addEventListener('click', function(event) {
			if (!event.target.matches('#my-div')) {
				var elem = document.querySelector('#my-div');
				elem.classList.remove('active');
			}
		});

		document.querySelector('#my-div').addEventListener('click', function(event) {
			var elem = event.target;
			elem.classList.toggle('active');
			event.stopPropagation();
		});
	</script>
</body>
</html>

解释：

我们首先定义了一个可以点击的div元素，并给该元素添加了一个可点击类名'clickable'。
然后，在页面的底部，我们添加了一个事件监听器：

document.addEventListener('click', function(event) {
  if (!event.target.matches('#my-div')) {
    var elem = document.querySelector('#my-div');
    elem.classList.remove('active');
  }
});

我们还添加了一个单击侦听器到特定元素的onclick事件中：

document.querySelector('#my-div').addEventListener('click', function(event) {
  var elem = event.target;
  elem.classList.toggle('active');
  event.stopPropagation();
});

此单击侦听器将添加或删除类名 'active'，具体取决于特定元素当前是否具有该类名。