1

我有一个关于参数的快速问题onclick

我有

function testPro(){
   codes....
   codes....

    var test = 'init';  //the test can only be init here...

    link.href         = '#';
    link.innerHTML   += 'test value';
    link.onclick      = onClick;
    link.onmouseover  = onHover;
    link.onmouseout   = hoverOut;  
   codes....
}

function onHover(){
   alert(test);
}

我想在用户clicks使用按钮时传递测试变量。我不能使用onHover(test)，因为它给了我错误。我该如何解决这个问题？

非常感谢

4

5 回答 5

3

使用一个小函数表达式，它接受事件参数并将其与test值一起传递给onHover：

var test = …;
link.onclick = function(event) {
    return onHover(test, event);
};

// somewhere else (on a higher scope than `test`)
function onHover(arg) {
    alert(arg);
}
于 2013-04-29T21:32:01.110 回答
2

也许是这样的：

function makeClickHandler(arg) {
  return function (event) {
    alert(arg);
  }
}

link1.onclick = makeClickHandler('arg1');
link2.onclick = makeClickHandler('arg2');
// ...

要增加该按钮的变量，您可以编写如下处理程序：

function makeClickHandler() {
  var i = 0;
  return function (event) {
    alert(++i);
  }
}
于 2013-04-29T21:39:46.263 回答
1

您的test变量在testPro函数范围内定义，不能由onHover全局范围内调用的函数直接使用。您有多种选择来解决此问题：

将test变量添加到事件处理程序的闭包中

function testPro() {
    ...
    var test = 'init';
    ...
    link.onmouseover = function() { return onHover(test); };
    ...
}

function onHover(test) {
    alert(test);
}

或将test变量放入一些全局可访问的命名空间

var globals = { test: null };

function testPro() {
    ...
    globals.test = 'init';
    ...
    link.onmouseover  = onHover;
    ...
}

function onHover() {
    alert(globals.test);
}

或将回调执行绑定到某个对象包含test

function testPro() {
    ...
    var scope = { test: 'init' };
    ...
    link.onmouseover  = onHover.bind(scope);
    ...
}

function onHover() {
    alert(this.test);
}

或将自定义数据属性添加到 DOM 元素

function testPro() {
    ...
    link.setAttribute('data-test','init');
    ...
    link.onmouseover  = onHover;
    ...
}

function onHover() {
    alert(this.getAttribute('data-test'));
}
于 2013-04-29T21:57:53.840 回答
1

您可以将随机属性附加到 DOM 元素：

function testPro(){
    var test = 'init'; 

    link.href         = '#';
    link.innerHTML   += 'test value';
    link.onclick      = onClick;
    link.onmouseover  = onHover;
    link.onmouseout   = hoverOut;  
    link.test         = test;
}

function onHover(){
    alert(this.test);
}

小提琴

于 2013-04-29T21:43:27.693 回答
0

您可以在执行范围内重新评估函数以获取闭包，但我建议使用不同的方法，因为 eval() 并非没有警告。

所以，即使我试图说服你不要这样做，这确实可以满足你的要求，并且只需最少的重构：

function testPro(){

    var test = 'init';  //the test can only be init here...

    link.href         = '#';
    link.innerHTML   += 'test value';
    link.onclick      = eval( "0||"+ onClick);

}

function onClick(){
   alert(test);
}

link={};
testPro();
link.onclick(); //shows "init"...
于 2013-04-29T21:49:11.587 回答