滑出错误触发两次答案

【问题标题】：Slideout Bug Triggering Twice滑出错误触发两次
【发布时间】：2023-04-02 09:06:01
【问题描述】：

在以奇怪的方式触发事件时遇到一些问题。如果你在下面的 jsfiddle 上点击 open 和 close 几次，你会看到发生了什么：

$('.btn-open-wrapper').on('click', function (event) {
    event.stopPropagation();
    $(".blackboard-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) {
        $('.btn-open-wrapper').addClass('is-hidden');
        $('.btn-close-wrapper').addClass('is-visible');
    });
    $('.blackboard-wrapper').addClass('is-open');
});


$('.btn-close-wrapper').on('click', function (event) {
    $('.btn-open-wrapper').removeClass('is-hidden');
    $('.btn-close-wrapper').removeClass('is-visible');

    event.stopPropagation();
    $(".btn-close-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) {
        $('.blackboard-wrapper').removeClass('is-open');
    });
});

【问题讨论】：

...发生了什么？预期的结果是什么？
当您第二次打开它时，您会注意到黑色方块不像第一次那样保持打开状态。我希望您第二次打开时的功能与第一次完全一样。
知道了，不得不在不同的浏览器中尝试...我注意到这个问题只发生在 Chrome 而 FF 做得很好（我上面评论的原因）
Roko，真奇怪，你是对的——还没有在其他浏览器上做任何测试。

标签： jquery events event-bubbling

【解决方案1】：

（Firefox 做得很好）
原因是camelCasetransitionEnd（你没用过）

Fixed (test in Chrome)

【讨论】：

【解决方案2】：

您在单击关闭时混淆了表达式。 Here's a working JSFiddle 与您的代码进行比较。

例如：

$(".btn-close-wrapper").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) {
  $('.blackboard-wrapper').removeClass('is-open');
});

应该是：

$("#blackboard-wrapper").one("transitionEnd webkitTransitionEnd oTransitionEnd MSTransitionEnd", function (event) {
  $('#btn-open-wrapper').removeClass('is-hidden');
  $('#btn-close-wrapper').removeClass('is-visible');
});

编辑：哦等等，这是骆驼问题。我的代码有不同的行为。

【讨论】：