Question

我有一个像这样的Accordion函数：

$("#notaccordion").addClass("ui-accordion ui-widget ui-helper-reset")
   .find("h3")
   .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
    .click(function () {
       $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
          .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
          .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s");
       if ($(this).next().is(':hidden') == true) {
          ;
          $(this).addClass('active'); $(this).next().slideDown('normal');
       }
       else {
          $(this).removeClass('active'); $(this).next().slideUp('normal');
       }

       //.end().next().slideUp('normal');
       return false;
    })
    .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

并单击所有面板功能以立即展开所有面板：

function clickAllPanels() {
   var elm = document.getElementsByTagName('table');
   var i = elm.length; while (i--) {
      clickItem(elm[i]);
    }
}

function clickItem(divObj) {
   if (divObj.click) {
      divObj.click();
   } else if (document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      var allowDefault = divObj.dispatchEvent(evt);
   }
}

我怎样才能让手风琴.click(function ()功能知道发送'点击'的clickAllPanels而不是用户的实际点击。我需要这样做，因为如果它来自clickAllPanels，我想更改上下滑动逻辑。

Answer 1

我这样做的方法是使用两个不同的事件名称，一个是“点击”，另一个是“强制点击”：

$( ... whatever ... ).bind("click forced-click", function(ev) {
  if (ev.type === "forced-click") {
    // called by programmatic trigger
  }
  // ...
});

当您触发事件时：

$( ... whatever ... ).trigger("forced-click");

另一种方法，我想是检查事件对象，看看是否有“originalEvent”属性。如果没有，那么你知道它是以编程方式触发的。就个人而言，我不喜欢依赖它，因为它没有记录。

Answer 2

为事件处理程序和您正在进行的实际工作提供单独的函数通常是个好主意：

function do_stuff(suitable_arguments, a_flag){
    //...
}

$(/*...*/).click(function(){
   do_stuff( /*...*/, true);
}

in_my_other_code(){
   do_stuff( /*...*/, false);
}

通过从事件处理中分离逻辑，您可以更灵活地选择何时以及如何调用它。

Answer 3

为什么不在'clickItem（）'函数中使用jquery：

function clickItem(divObj) {
    $(divObj).trigger('click', { manual: true });
}

单击处理程序中的event参数将具有属性“isTrigger”，当使用鼠标单击项目时，该属性将不存在：

$("#notaccordion")
    ...
    .click(function(e) {

        if (e['isTrigger']) {
            // do this
        } else {
            // do that
        }

    });

这是fiddle

Javascript +区分用户点击和从功能发送的点击次数

3 个答案: