使用布尔值的 eventListener 运行两次（Javascript 和 CSS）答案

【问题标题】：eventListener using boolean runs twice (Javascript and CSS)使用布尔值的 eventListener 运行两次（Javascript 和 CSS）
【发布时间】：2017-04-20 18:43:22
【问题描述】：

我正在尝试使用 Javascript 和 CSS 转换来制作效果。假设我有 2 个 DIV，一个不会显示（我称之为“隐藏”），另一个（“炫耀”）将有 1 个按钮。当我按下该按钮时，我想转换“showy”，然后显示“hiddy”，并创建一个不透明度为 0 的新 DIV，它将覆盖“showy”，并具有一个 onclick 功能，该功能将导致“hiddy”不显示和“ showy' 恢复到初始状态，并删除我们创建的 DIV。

我曾尝试使用“showy”上的 eventListener 使用“propertyName === transform”和带有布尔“状态”的 if 语句来执行此操作，但它不起作用。

第一次运行它时，它工作得很好，它确实激活了一次监听器，布尔值为 true，进行转换并创建 div，然后当你点击新的 div 时，它会触发布尔值为 false 的监听器.现在问题来了，如果您再次单击应该再次调用函数 trans() 的按钮，即使状态没有在任何 eventListener 中更改其值，侦听器也会运行两次，当我们单击按钮时它会更改（它是初始化或设置为true）或当我们点击新的div时（它变为false）。

感谢您的宝贵时间。

var iteration = 0;
function trans() {
  if(typeof status === 'undefined'){
    var status = true;
  }
  else {
    status = true;
  }

  var hiddy = document.getElementById('hiddy');
  hiddy.classList.add('active');
  var showy = document.getElementById('showy');
  showy.classList.add('transformRight');

  showy.addEventListener('transitionend', function(e) {
    if(e.propertyName === 'transform') {
      iteration++;
      console.log('Iteration number: '+iteration);
      console.log('Status value --> '+status);

      if (status) {
        console.log('Status was true');
        var meh = document.createElement('div');
        meh.id = 'layer';
        showy.appendChild(meh);
        layer = document.getElementById('layer');
        layer.classList.add('layer');
        layer.onclick = function () {
          status = false;
          showy.classList.remove('transformRight');
          showy.classList.add('transformLeft');
          showy.removeChild(layer);

        }
      }

      if (!status) {
        console.log('Status was false');
        hiddy.classList.remove('active');
        showy.classList.remove('transformLeft');
      }

    }
  },false);

}

var iteration = 0;
function trans() {
  if(typeof status === 'undefined'){
    var status = true;
  }
  else {
    status = true;
  }
  
  var hiddy = document.getElementById('hiddy');
  hiddy.classList.add('active');
  var showy = document.getElementById('showy');
  showy.classList.add('transformRight');
  
  showy.addEventListener('transitionend', function(e) {
    if(e.propertyName === 'transform') {
      iteration++;
      console.log('Iteration number: '+iteration);
      console.log('Status value --> '+status);
      
      if (status) {
        console.log('Status was true');
        var meh = document.createElement('div');
        meh.id = 'layer';
        showy.appendChild(meh);
        layer = document.getElementById('layer');
        layer.classList.add('layer');
        layer.onclick = function () {
          status = false;
          showy.classList.remove('transformRight');
          showy.classList.add('transformLeft');
          showy.removeChild(layer);
          
        }
      }
      
      if (!status) {
        console.log('Status was false');
        hiddy.classList.remove('active');
        showy.classList.remove('transformLeft');
      }
      
    }
  },false);
  
}

.showy {
  display:none;
  background-color: red;
  width: 200px;
  height: 200px;
  z-index: 3;
}

.showy.active {
  display:block;
}
 
.hiddy {
  display:none;
  background-color: blue;
  width: 200px;
  height: 200px;
  z-index: 1;
}

.hiddy.active {
  display:block;
}

.transformRight {
  transform: translate(50%);
  transition: transform 1s linear 0s;
}

.transformLeft {
  transform:translate(0%);
  transition: transform 1s linear 0s;
}

.layer {
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  margin-left: 0px;
  top: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 8;
  opacity: 0.4;
  background-color: yellow;
}

.active {
  display:block;
}

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="showy" class="showy active"><button type="button" onclick="trans()">Button</button></div>
    <div id="hiddy" class="hiddy"></div>

  </body>

</html>

【问题讨论】：

标签： javascript html css css-transforms

【解决方案1】：

好的，我找到了解决办法。

在事件监听器完成后删除它就可以了。

if (!status) {
    console.log('Status was false');
    hiddy.classList.remove('active');
    showy.classList.remove('transformLeft');
    showy.removeEventListener('transitionend', arguments.callee, false);
}

在此找到了如何从“内部”删除事件监听器 post.

【讨论】：