是否有一种简单的方法来撤消单击事件？
我正在学习基本的javascript事件，并想知道如何撤消单击事件。
我有一个使用changeText方法更改文本的简单事件。
那只是我不想做的一半。由于用户体验很重要，所以当用户单击页面上的任何位置时，我希望这个事件被“取消”。
因此，从本质上说，在用户单击按钮并更改文本之后，他们应该能够单击页面上的任何位置，从而使文本返回到默认的"I will change“。
const changeText = () => {
const p = document.querySelector('p');
p.textContent = "I changed because of an event listener.";
}
// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);<button>Click me</button>
<p>I will change.</p>
回答 4
Stack Overflow用户
发布于 2018-08-01 12:18:35
您可以添加另一个函数revertText，它取消更改，并在单击document时调用它。但是，如果这样做，也会在单击按钮时触发它。因此，为了只在单击按钮时跳转按钮事件，请使用e.stopPropagation()来阻止document单击事件也执行。
见下面的工作示例：
const changeText = e => { // Pass event (e) argument into function
e.stopPropagation(); // Stop the document click event from running
const p = document.querySelector('p');
p.textContent = "I changed because of an event listener.";
}
const revertText = () => {
const p = document.querySelector('p');
p.textContent = "I will change";
}
// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);
document.addEventListener('click', revertText) // Add second event listener on the document<button>Click me</button>
<p>I will change.</p>
Stack Overflow用户
发布于 2018-08-01 12:14:36
可以将eventListener附加到文档：
document.addEventListener('click', changeTextBack)
changeTextback (event) {
// use event target to make sure he is not clicking on button
// use same methods as in changeText method to target element and alter text
}文档表示整个页面。你也可以把它附加到窗口上。https://developer.mozilla.org/en-US/docs/Web/API/Document https://developer.mozilla.org/nl/docs/Web/API/Window
这有用吗？
Stack Overflow用户
发布于 2018-08-01 12:14:42
所以你只想要另一个点击事件，但在另一个对象上。在HTML中，您必须创建某种容器，然后：
const changeTextBack = () => {
const p = document.querySelector('p');
p.textContent = "I will change.";
}
// Listen for click event
const buttonContainer = document.querySelector('button-container');
buttonContainer.addEventListener('click', changeTextBack);https://stackoverflow.com/questions/51632938
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号