javascript - 为什么 CSS 转换在通过 trigger.click 触发时不触发

Question

我不明白为什么 CSS 转换在通过触发事件调用时不运行，但在通过鼠标单击调用时运行。

我指的是这个 jsFiddle . (我的事件连接在 JS 面板的底部)

<button id="notworks">notworks</button>
<button class="dl-trigger">works</button>

第一个按钮只是触发第二个按钮的点击事件。这不会运行关联的 CSS 转换，但它会触发事件并且 console.log 输出完全相同......所以我知道点击事件的处理程序正在触发并被传递触发方式。

 $("#notworks").click(function () {
       $('.dl-trigger').trigger('click');
 });

然而，CSS 转换仅在直接单击具有类 dl-trigger 的第二个按钮时运行。我在这两种情况下都测试了 this，无论是直接点击还是触发点击，它都是相同的引用。

因此无论单击哪个按钮，此代码块都会运行:

 _initEvents: function () {

            var self = this;
            this.$trigger.on('click.dlmenu', function () {

                if (self.open) {
                    self._closeMenu();
                }
                else {
                    self._openMenu();
                }
                return false;

            });

我也可以跟踪打开和关闭的调用，并确认它们都运行无误。但是第一次单击按钮时，菜单根本不显示。

使用“CSS”转换时是否会发生某种非我的代码查找？

Answer 1

要跟进您的聊天室问题，下面的代码返回 false。

this.$trigger.on('click.dlmenu', function () {
   if (self.open) {
      self._closeMenu();
   }
   else {
      self._openMenu();
   }
   return false;
});

从 jquery 事件处理程序返回 false 将抑制事件并等同于调用:

e.preventDefault();
e.stopPropagation();

因此返回 false 会抑制该事件，这很重要，因为在 openMenu 函数中，代码添加了一个处理程序来在您单击菜单范围之外的任何地方时关闭菜单:

   $body.off('click').on('click.dlmenu', function () {
          self._closeMenu();
   });

因此，如果代码没有返回 false 并抑制事件，它将传播到正文并立即再次关闭菜单。这就是单击常规 menuOpen 按钮时发生的情况。

但是，由于您尝试通过以下方式触发/模拟使用另一个按钮点击该按钮:

   $("#notworks").click(function (e) {
       $('.dl-trigger').trigger('click');
   });

然后那个按钮 notworks 现在传播一个点击，它被 body handler 拾取并立即关闭由 trigger 调用打开的菜单。

所以你只需要取消传播:

   $("#notworks").click(function (e) {
       $('.dl-trigger').trigger('click');
       return false;
   });