的setAttribute,的onClick和跨浏览器兼容性的setAttribute,的onCli

2019-05-12 11:39发布

我读了一些关于这个职位,但没有与任何固体的答案。 这里是我的代码:

// button creation
onew = document.createElement('input');
onew.setAttribute("type", "button");
onew.setAttribute("value", "hosts");
onew.onclick = function(){fnDisplay_Computers("'" + alines[i] + "'"); }; // ie
onew.setAttribute("onclick", "fnDisplay_Computers('" + alines[i] + "')"); // mozilla
odiv.appendChild(onew);

现在,setAttribute()方法(与Mozilla的评论)在Mozilla罚款,但只有当它来到它上面的行之后。 因此,换句话说,它似乎只是默认为准得到最后一组。 该.onclick方法(用即评论)不会在任何情况下工作,我使用它不正确?

无论哪种方式,我不能找到一种方法,使这项工作在IE可言,更不用说两者。 我没有使用.onclick方法时改变函数调用,它仅使用一个警报功能这就是为什么我相信我的语法不正确一个简单的通话工作的罚款。

长话短说,我不能得到的onclick参数,IE / Mozilla浏览器之间一致地工作。

- 尼古拉斯

Answer 1:

我通常使用这样的:

onew.onclick = new Function("fnDisplay_Computers('" + alines[i] + "')");

这都应该在IE火狐ë工作。



Answer 2:

onew.setAttribute( “类型”, “键”);

切勿在HTML文档中使用的setAttribute。 IE得到它在许多情况下严重错误,和DOM,HTML属性是短,速度更快,更易于阅读:

onew.type= 'button';

}; //即

什么是“ALINES”? 你为什么把它转换为字符串,并用单引号包围呢? 它看起来像你正在尝试做一些令人发指涉及字符串评估代码(这是你在“onew.setAttribute”版本低于做什么)。 在字符串评估JavaScript代码几乎总是错误的事情; 避免像瘟疫。 在上述情况下,IE浏览器也应该这样做火狐:它不应该工作。

如果“ALINES [I]”是一个字符串,我猜你正在试图做的是让它记住该字符串通过构建的代码字符串,将在JavaScript评估原来的字符串。 但:

"'" + alines[i] + "'"

是不够的。 如果“ALINES [I]”在一个单引号,或反斜杠会发生什么?

'O'Reilly'

你已经有了一个语法错误和可能的安全漏洞。 现在,你可以做一些繁琐和恼人的,如:

"'" + alines[i].split('\\').join('\\\\').split("'").join("\\'") + "'"

试图逃跑的字符串,但它的丑陋,并不会为其它数据类型的工作。 你甚至可以问JavaScript来为你做它:

uneval(alines[i])

但是,不是所有的对象,甚至可以转化为可求的JavaScript源字符串; 基本上整个做法是注定要失败的。

正常的事情,如果你只是想拥有的onclick回调调用函数的参数是写在简单的方法的代码:

onew.onclick= function() {
    fnDisplay_Computers(alines[i]);
};

通常,这工作,是你想要的。 然而,有,有轻微的皱纹,你可以在这里打,这可能是什么是混淆你到考虑与琴弦的古怪做法。

也就是说,如果“我”在这种情况下是“for”循环中,提及“ALINES [I]”不会做你认为它做一个封闭的可变。 这是循环结束 - “我”会被当点击发生的回调函数访问。 此时“我”变量将会留下它必须在循环结束的任何值,所以“ALINES [I]”将永远是“ALINES”的最后一个元素,无论“1瓦特”被点击了其中。

(参见例如, 如何解决关闭问题在ActionScript 3(AS3)对于一些这方面的讨论。它的混乱与JavaScript和Python的倒闭的最大原因之一,而应该被固定在一个语言水平的某一天。)

您可以通过自身的功能封装关闭,这样避开环路问题:

function callbackWithArgs(f, args) {
    return function() { f.apply(window, args); }
}

// ...

onew.onclick= callbackWithArgs(fnDisplay_Computers, [alines[i]]);

而在JavaScript中的更高版本,你就可以简单地说:

onew.onclick= fnDisplay_Computers.bind(window, alines[i]);

如果您希望能够在今天的浏览器使用“Function.bind()”,你可以从一个实现原型框架,或只使用:

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}


Answer 3:

使用addEventListener()函数以“ click ”为type用于基于Mozilla的浏览器参数和attachEvent()函数以“ onclick ”作为sEvent为IE参数; 我觉得最好用try / catch语句,例如:

try {
  onew.attachEvent("onclick", //For IE
                   function(){fnDisplay_Computers("'" + alines[i] + "'"); });
}
catch(e) {
  onew.addEventListener("click", //For Mozilla-based browsers
                   function(){fnDisplay_Computers("'" + alines[i] + "'"); },
                   false);
}


Answer 4:

我觉得#3 protesteth太多。 在很多情况我动态生成表格和需要的参数传递给回调函数。 这不是一个类型安全的问题,因为我的变量的parm是一个整数索引所涉及的表行。 这里是既具有可变和固定参数的代码,这似乎是跨浏览器兼容:

for (i = 0; i < arrTableData.length; i++) {
    eleTR = objTable.insertRow(i + 1);
    cell = eleTR.insertCell(0);
    cell.width = "21";
    var myElement = document.createElement('img');
    myElement.setAttribute('src', 'images/button_down.gif');
    myElement.setAttribute('alt', 'Move item down');
    myElement.onclick = new Function('moveItem(' + i + ',0)');
    cell.appendChild(myElement);
}


文章来源: setAttribute, onClick and cross browser compatibility