javascript - 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表达式。您实际上应该绑定该函数以避免调用它。

  函数绑定（）{
    var initArgs = 数组（参数）；
    var fx = initArgs.shift();
    var tObj = initArgs.shift();
    var args = initArgs;
    返回函数（）{
      返回 fx.apply(tObj, args.concat(array(arguments)));
    };
  }
  函数数组（一）{
    变量 r = []; for (var i = 0; i < a.length; i++)
      r.push(a[i]);
    返回 r;
  }

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