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'));
}

JavaScript - 点击事件有问题

2 个答案: