javascript - 使用 bool 值的 eventListener 运行两次(Javascript 和 CSS)-6ren

javascript - 使用 bool 值的 eventListener 运行两次(Javascript 和 CSS)

转载作者：太空宇宙更新时间：2023-11-04 08:49:56

25

4

我正在尝试使用 Javascript 和 CSS 转换来制作效果。假设我有 2 个 DIV，一个不会显示(我称之为“hiddy”)，另一个(“showy”)将有 1 个按钮。当我按下那个按钮时，我想转换“showy”，然后显示“hiddy”，并创建一个不透明度为 0 的新 DIV，它将覆盖“showy”，并将具有一个 onclick 函数，这将导致“hiddy”不显示和“showy' 返回到它的初始状态，并删除我们创建的 DIV。

我试图通过使用“propertyName === transform”的“showy”上的 eventListener 和带有 bool “status”的 if 语句来执行此操作，但它不起作用。

第一次运行它时，它工作得很好，它会激活监听器一次， bool 值为 true，进行转换并创建 div，然后当您单击新的 div 时，它会触发监听器， bool 值为 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>

最佳答案

好的，我找到了解决方案。

完成后删除 eventListener 就可以了。

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

在此找到了如何从“内部”删除一个 eventListener post .

关于javascript - 使用 bool 值的 eventListener 运行两次(Javascript 和 CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43516002/

25

4

0

文章推荐： javascript - AngularJS:如何在拖动 map 后获取标记的位置

文章推荐： java - 小程序图像缓存

文章推荐： java - 在Java中查找数组中的多个搜索结果

文章推荐： java - 如何在表格中双击鼠标获取行号或单元格号

javascript - 如果使用 vanilla Javascript 触发另一个 EventListener，我如何返回或使所有其他 EventListener 为空
我想要完成的是一段代码，当单击其中一个按钮时，该按钮将获得下面列出的样式，而所有其他按钮样式将返回 null。我假设它涉及一个 bool 语句，但也许我错了。您将在下面看到我试图使用我的“else
javascript - 将 eventListener 添加到具有相同类名但不同 id 的 div 会覆盖以前的 eventListener
我在我的 javascript 文件中的 for 循环中创建了一堆 div。它们具有相同的类名但不同的 ID。我通过 for 循环添加了一个事件监听器，但我之前的分配被覆盖了，现在所有的 div 都
多个对象上的javascript eventlistener
我为一些创建了一个 EventListener元素，现在我想更改此特定元素的子元素的不透明度，以更改此特定元素上的 EventListener 是否为真。我如何用 jQuery 或 Javascr
javascript - 移除类中定义的 EventListener
我正在尝试删除一个 eventListener，但看起来我错过了什么。为什么下面的代码不起作用，它没有从按钮中删除事件监听器。我也试过绑定(bind)这个来传递作用域，但是也没用 class Te
Spring @EventListener 注释不起作用
我想在一个类中处理多个事件，这是我的示例: @Lazy(false) @Component public class EventListenerImpl { @EventListener
symfony - EventListener 更新其他实体并死循环
在我的应用程序中，我有“用户”。一个用户可以有多个“账户” 我的“帐户”实体上有一个监听器。它在“service.yml”文件中声明如下: account_listener: class: A
CQRS - EventListener 可以调用命令吗？
我想在我的项目中使用 CQRS 模式的元素。我想知道我是否用命令和事件做对了。我不确定的是事件是否可以调用命令。为了更好地展示我想要做什么，我将使用图表和示例。这是一个例子: 用户调用 TripC
Javascript eventlistener 需要单击两次才能正常工作
所以当我点击“hartje”部分时，我正在触发一个功能。该函数正在获取名称为“food-option”的所有类。如果我点击函数触发器，它应该给“数据最喜欢的”一个值。它确实给了它一个值，但问题是我必须
javascript - eventListener 内的代码没有立即调用？
我试图理解这段代码，但它没有任何意义。当点击#open_help按钮时，他正在调用handleOpen()，它调用showHelp()，它调用jQuery函数来显示帮助div，但如果您在下面看到他正在
javascript - 在每次迭代时以索引作为参数的循环中添加 EventListener
使用 JavaScript 创建表格时，我正在尝试在循环中设置事件监听器。每次迭代中的事件监听器应调用相同的函数，但以当前索引作为参数。我在这里发现我可以将闭包与函数数组一起使用，但我必须使用数组吗？
javascript - EventListener 不适用于克隆
这个问题已经有答案了: Javascript infamous Loop issue? [duplicate] (5 个回答) 已关闭 7 年前。 http://jsfiddle.net/1wqdmo
javascript - 无法从函数内部删除 eventListener
我调用一个函数，其中包含“if/else”语句，该函数根据作为参数传递的 bool 值添加或删除监听器。我的问题是我无法通过调用相同的函数来删除先前添加的监听器我缺少什么？ function li
javascript - 禁用点击 EventListener
我正在尝试学习 HTML5 Canvas 。在出现吃 cookies 的猫 gif 之前，第一张图片需要点击七次。最初，我将 click EventListener 绑定(bind)到图像。出现吃 c
javascript - 如何正确删除 eventListener？
我很喜欢普通的 JS 井字游戏每个单元格都是一个按钮。为了处理点击，我将 eventListener 添加到包装 div: board.addEventListener("click", handle
javascript - 为每个复选框添加一个 eventListener
我正在寻找一种简洁明了的方法来向我的每个复选框添加事件监听器，而不必重复我的 Javascript 代码，当涉及到 JS 时，我仍然不知所措，所以任何帮助都会非常有用赞赏。这是我目前所拥有的
javascript - EventListener 存储在哪里？
大家好。有人知道我们使用 addEventListener 方法时事件存储在哪里吗？？？示例: window.addEventListener('mousedown', this.myvar.onCl
javascript - 焦点改变的 EventListener？
有没有一种方法可以将事件监听器添加到输入，其中焦点从 onfocus 变为 off focus 基本上我使用 key up 为我的输入框分配了一个事件监听器，然后调用我的服务器来检查用户名是否已经在数
javascript - 表单的无效 eventListener
我正在 try catch 表单的 invalid 事件，但它似乎没有发生？ https://codepen.io/MartinMuzatko/pen/VzWwxG?editors=1010 对于我的
javascript - 单击时未删除 eventListener
我试图在单击 Canvas 元素时删除 eventListener: document.getElementById("canvas") .addEventListener("clic
javascript - 在循环中分配 EventListener
我使用这行代码向通过 forloop 创建的 div 添加事件监听器: for(var i in mail){ //create div parent.addEventListener("

首页

博学

6Ren·AI

商城

javascript - 使用 bool 值的 eventListener 运行两次(Javascript 和 CSS)