Question

我正在学习基本的javascript事件，并且想知道如何撤消click事件。

我有一个简单的事件，该事件使用changeText方法更改文本。

那只是我不想做的一半。由于用户体验很重要，因此我希望当用户单击页面上的任何位置时都可以取消此事件。

因此，基本上，在用户单击按钮并更改了文字之后，他们应该能够在页面上的任意位置单击，从而使文字恢复为默认的“我将更改”。

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>

Answer 1

您可以将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

这有帮助吗？

Answer 2

因此，您只想要另一个click事件，但在另一个对象上。在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);

Answer 3

您可以在文档上绑定一个事件，并将默认文本全局存储。请参阅下面的解决方案：

let obj = {}; // object to store the def text of "p"
const changeText = (event) => { // pass the event object here
  event.stopPropagation(); // stop the event to propagate back to parent
  const p = document.querySelector('p');
  if (event.target.tagName === "BUTTON") { // if clicked item is button
    if (!obj['p']) {
      obj['p'] = p.textContent; // store the def text in obj
    }
    p.textContent = "I changed because of an event listener."; // change the text
  } else { // otherwise
    p.textContent = obj.p; // change back the def text
  }
}

// Listen for click event
const button = document.querySelector('button');

button.addEventListener('click', changeText);
document.addEventListener('click', changeText);

<button>Click me</button>

<p>I will change.</p>

Answer 4

您可以添加另一个函数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>

是否有一种简单的方法来撤消点击事件？

4 个答案: