Question

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

我指的是jsFiddle。（我的事件连接在JS面板的底部）

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

第一个按钮只是触发第二个按钮事件。这不会运行关联的CSS转换，但它会触发事件并且console.log输出完全相同...所以我知道click事件的处理程序正在触发并且无论触发器方法如何都会被传递。 / p>

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

但是CSS转换只能在第{02}类的第二个按钮上直接点击。我在两种情况下都测试了dl-trigger，无论是直接点击还是触发点击，它都是相同的参考。

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

this

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

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

Answer 1

您的 notworks 现在变为工作;）

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

小提琴：link

Answer 2

要跟进您的聊天室问题，以下代码会返回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正在传播一个点击，该点击由身体处理程序拾取并立即关闭由触发器调用打开的菜单。

所以你只需要取消传播：

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

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

2 个答案: