Question

我想将点击事件绑定到每个<p>，但它似乎无法正常工作。

当我运行脚本时，我立即得到三个警报。我只想在点击三个<p>'中的任意一个时获取它们。

谁能告诉我我做错了什么？

编辑：讽刺这是它的样子。 HTML正如它应该：<p class="special">text text text</p>等

(function () {
    var myFunction = function (theP) {
            alert(theP.id)          
        }


    window.onload = function () {           
        var pTags = document.getElementsByTagName('p'),
            pLength = pTags.length,
            i;

        for (i = 0; i < pLength; i += 1) {
            if(pTags[i].className == 'special'){

                pTags[i].onClick = myFunction(pTags[i]);

            }
        };
    }
})();

聚苯乙烯。我不能使用jQuery atm

Answer 1

尝试替换

pTags[i].onClick = myFunction(pTags[i]);

与

pTags[i].onClick = function() { myFunction(pTags[i]); }

您可以看到，当您指定对象的onClick时，您正在将表达式的结果复制到该对象。您应该复制的内容是在单击p时调用的函数。

相反，您正在运行执行myFunction(pTags[i])的命令alert()，并获取该函数的结果。现在，由于函数不返回任何内容，因此表达式myFunction(pTags[i])的值未定义。

然后您获取该值，并将其分配给onClick。基本上你所做的就是：

对于每个“特殊”段落：

执行alert
将undefined分配给段落的onClick。

Answer 2

myFunction需要为您的代码返回一个函数

下面有人提到了一个试图创建内联函数的选项，但由于闭包绑定是用变量而不是值进行的，所以这不起作用（代码中的i在将其包含在函数中后会被修改）。

有两种显而易见的方法来创建函数并让它工作。一种是创建一个处理程序函数......另一种是使用this来获取元素。

(function () {
    var myFunction = function (theP) {
            return function() {
                alert(theP.id);
            }                 
        }


    window.onload = function () {                       
        var pTags = document.getElementsByTagName('p'),
                pLength = pTags.length,
                i;

        for (i = 0; i < pLength; i += 1) {
                if(pTags[i].className == 'special'){

                        pTags[i].onClick = myFunction(pTags[i]);

                }
        };
    }
})();

使用this

(function () {
    var myFunction = function () {
                alert(this.id)                  
        }


    window.onload = function () {                       
        var pTags = document.getElementsByTagName('p'),
                pLength = pTags.length,
                i;

        for (i = 0; i < pLength; i += 1) {
                if(pTags[i].className == 'special'){

                        pTags[i].onClick = myFunction;

                }
        };
    }
})();

第二种格式是首选格式，因为浏览器使用的内存要少得多。

Answer 3

.onclick 区分大小写，不是吗？

Answer 4

您正在调用您的函数。当您使用括号时，您可以调用您的函数。

onclick需要一个函数引用：

您可以这样修改代码：

myFunction(theP){
 return function(){alert(theP.id)};
}

这可以确保您的调用返回函数引用而不是值。

Answer 5

感谢所有答案。非常感谢！
我重写了我自己的脚本并解决了它：这看起来怎么样？

(function () {
    var myFunction1 = function (theP) {
            theP.onclick = myFunction2;
        },

        myFunction2 = function(){
            alert('hello world')
        }


    window.onload = function () {           
        var pTags = document.getElementsByTagName('p'),
            pLength = pTags.length,
            i;

        for (i = 0; i < pLength; i += 1) {
            if(pTags[i].className == 'special'){
                myFunction1(pTags[i]);
            }
        }
    }
})();

onClick在p标签上无法正常工作

5 个答案: