javascript - javascript 中的多任务按钮

Question

如何在JS中获得多功能按钮？例如: 第一次单击会将按钮向下移动，下一次单击会将其返回到默认位置。

let caoButton = document.querySelector('.js-cao-2');
caoButton.style.position = 'absolute';
caoButton.style.top = '0';
caoButton.style.left = '0';

caoButton.addEventListener('click',() {
caoButton.style.top = 'unset';
caoButton.style.left = 'unset';
caoButton.style.bottom = '0';
caoButton.style.right = '0';
});

Answer 1

同意@charlietfl

let caoButton = document.querySelector('.js-cao-2');

caoButton.addEventListener('click',()=>caoButton.classList.toggle("moveDown"));

.js-cao-2{
  position: absolute;
  top: 0;
  left: 0;
}
.moveDown {
  top: unset;
  left: unset;
  bottom: 0; 
  right: 0;
}

<div style="height: 100vh">
  <button class="js-cao-2" >Move me</button>
</div>

如果您希望做更多的事情而不仅仅是操作 css 并且必须使用 JavaScript，您还可以执行以下操作:

let caoButton = document.querySelector('.js-cao-2');

caoButton.addEventListener('click',firstFunctionality);

function firstFunctionality(){
  caoButton.removeEventListener('click', firstFunctionality)
  caoButton.addEventListener('click',secondFunctionality);
  //do stuff here
}

function secondFunctionality(){
  caoButton.removeEventListener('click', secondFunctionality)
  caoButton.addEventListener('click', firstFunctionality);
  //do something different here
}