JavaScript - возникли проблемы с событием клика

Question

Я использую Sizzle для выбора различных частей DOM.

Мой код ниже. Проблема заключается в том, что событие onmouseup вызывается при загрузке страницы, а не при взаимодействии пользователя со страницей.

Может кто-нибудь объяснить, почему это так.

Спасибо.

// Effects object
var effects = {
    // Display an object
    show : function(obj) {
        obj.style.display = 'block';
    },
    // Hide an object
    hide : function(obj) {
        obj.style.display = 'hide'; 
    },
    // Toggle
    toggle : function(obj) { 
        if (obj instanceof Array) {
            alert('array');
        } else {
            alert('single');    
        }
    }
}

// Selector Class
var s = Sizzle;

window.onload = function() {
    s('#toggle-content').onmouseup = effects.toggle(s('.hidden-content'));
}

HTML по запросу:

<div class="page-content box create-page">
    <h1><span class="left">Create Page</span><a class="right" id="toggle-content" href="#">Expand</a></h1>
    <div class="hidden-content">
        ...
    </div>
</div>

Answer 1

вам нужно передать его как анонимную функцию, например.

window.onload = function() {
    s('#toggle-content').onmouseup = function(){effects.toggle(s('.hidden-content'));}
}

Answer 2

Это потому, что вы звоните effects.toggle в выражении. Вы должны связать функцию, чтобы не вызывать ее.

  function bind() {
    var initArgs =  array(arguments);
    var fx =        initArgs.shift();
    var tObj =      initArgs.shift();
    var args =      initArgs;
    return function() {
      return fx.apply(tObj, args.concat(array(arguments)));
    };
  }
  function array(a) {
    var r = []; for (var i = 0; i < a.length; i++)
      r.push(a[i]);
    return r;
  }

window.onload = function() {
    s('#toggle-content').onmouseup = bind(effects.toggle, null, s('.hidden-content'));
}