This article explains how to execute processing only on the first click using JavaScript
Please tell me how to execute the process only on the first click!
You can use addEventListener’s once option to perform processing only on the first click.
What is the once option of addEventListener method?
There are various methods for executing processing on the first click, but this section describes a method that uses the once option of the addEventListener method.
The addEventListener method is used to register a function (event listener) that is called when the specified event occurs. addEventListener method has the following syntax
target.addEventListener(type, listener[, options]);capture: Specifies whether the browser captures event propagation.once: Specifies whether the event listener is called only once.passive: Indicates that the event listenerpreventDefault()does not call.
The once option specifies that the event listener should be called only once. In other words, processing can be executed only on the first click. The following is an example of processing execution on the first click using the once option of the addEventListener method.
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Process executed only when clicked for the first time');
}, { once: true });In this example, a click event listener is registered for the button element. By passing { once: true } as an options argument, processing is performed only on the first click; no processing is performed on the second or subsequent clicks.
Explanation using a sample program
The following is an example of executing the process on the first click using the once option of the addEventListener method.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How to perform processing only on the first click</title>
</head>
<body>
<button>Click here</button>
<script>
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Process executed only when clicked for the first time');
}, { once: true });
</script>
</body>
</html>In this example, a click event listener is registered for the button element. By passing { once: true } as an options argument, processing is executed only on the first click; processing is not executed on the second and subsequent clicks.
When the above example is executed, the console will display the text “Processing executed only on first click” when the button is clicked. After that, no matter how many times the button is clicked, no processing will be performed.
Thus, by using the once option of the addEventListener method, processing can be executed only on the first click.
summary
We explained how to execute the process only on the first click.
- By using the once option of the addEventListener method, processing can be performed only on the first click.
- The third argument of the addEventListener method is optionally passed { once: true }.
- The event listener is called only once, so processing is executed only on the first click.
I was able to make the first action perform a specific process!
The method of executing processing only on the first click is one of the most convenient ways to work with JavaScript; learn the once option of the addEventListener method and get familiar with it.
Comments