Почему свойство onclick, установленное с помощью setAttribute, не работает в IE?
-
01-07-2019 - |
Вопрос
Столкнулся с этой проблемой сегодня, публикуя на случай, если у кого-то еще возникнет такая же проблема.
var execBtn = document.createElement('input');
execBtn.setAttribute("type", "button");
execBtn.setAttribute("id", "execBtn");
execBtn.setAttribute("value", "Execute");
execBtn.setAttribute("onclick", "runCommand();");
Оказывается, чтобы заставить IE запускать onclick для динамически генерируемого элемента, мы не можем использовать setAttribute .Вместо этого нам нужно установить свойство onclick для объекта с анонимной функцией, обертывающей код, который мы хотим запустить.
execBtn.onclick = function() { runCommand() };
ПЛОХИЕ ИДЕИ:
Вы можете сделать
execBtn.setAttribute("onclick", function() { runCommand() });
но это сломается в IE в нестандартном режиме, согласно @scunliffe.
Ты вообще не можешь этого сделать
execBtn.setAttribute("onclick", runCommand() );
поскольку он выполняется немедленно и устанавливает результат runCommand() в качестве значения атрибута onClick, вы также не можете этого сделать
execBtn.setAttribute("onclick", runCommand);
Решение
чтобы заставить это работать как в FF, так и в IE, вы должны написать оба способа:
button_element.setAttribute('onclick','doSomething();'); // for FF
button_element.onclick = function() {doSomething();}; // for IE
благодаря этот пост.
Обновить:Это делается для того, чтобы продемонстрировать, что иногда это является необходимо использовать setAttribute!Этот метод работает, если вам нужно взять исходный атрибут onclick из HTML и добавить его в событие onclick, чтобы он не переопределялся:
// get old onclick attribute
var onclick = button_element.getAttribute("onclick");
// if onclick is not a function, it's not IE7, so use setAttribute
if(typeof(onclick) != "function") {
button_element.setAttribute('onclick','doSomething();' + onclick); // for FF,IE8,Chrome
// if onclick is a function, use the IE7 method and call onclick() in the anonymous function
} else {
button_element.onclick = function() {
doSomething();
onclick();
}; // for IE7
}
Другие советы
Существует Большой коллекция атрибутов, которые вы не удается установить в IE используя .setAttribute()Установить атрибут() который включает в себя каждый встроенный обработчик событий.
Смотрите здесь для получения подробной информации:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
отлично работает!
использование обоих способов сейчас кажется ненужным:
execBtn.onclick = function() { runCommand() };
очевидно, работает в каждом текущем браузере.
протестировано в текущих версиях Firefox, IE, Safari, Opera, Chrome на Windows;Firefox и Epiphany в Ubuntu;не тестировался на Mac или мобильных системах.
- Крейг:Я бы попробовал "document.getElementById(ID).type='пароль';
- Кто-нибудь проверял подход "addEventListener" на разных движках?
Это потрясающая функция для кроссбраузерной привязки событий.
Получил это от http://js.isite.net.au/snippets/addevent
С его помощью вы можете просто делать Events.addEvent(element, event, function);
и не беспокойтесь!
Например:(http://jsfiddle.net/Zxeka/)
function hello() {
alert('Hello');
}
var button = document.createElement('input');
button.value = "Hello";
button.type = "button";
Events.addEvent(input_0, "click", hello);
document.body.appendChild(button);
Вот эта функция:
// We create a function which is called immediately,
// returning the actual function object. This allows us to
// work in a separate scope and only return the functions
// we require.
var Events = (function() {
// For DOM2-compliant browsers.
function addEventW3C(el, ev, f) {
// Since IE only supports bubbling, for
// compatibility we can't use capturing here.
return el.addEventListener(ev, f, false);
}
function removeEventW3C(el, ev, f) {
el.removeEventListener(ev, f, false);
}
// The function as required by IE.
function addEventIE(el, ev, f) {
// This is to work around a bug in IE whereby the
// current element doesn't get passed as context.
// We pass it via closure instead and set it as the
// context using call().
// This needs to be stored for removeEvent().
// We also store the original wrapped function as a
// property, _w.
((el._evts = el._evts || [])[el._evts.length]
= function(e) { return f.call(el, e); })._w = f;
// We prepend "on" to the event name.
return el.attachEvent("on" + ev,
el._evts[el._evts.length - 1]);
}
function removeEventIE(el, ev, f) {
for (var evts = el._evts || [], i = evts.length; i--; )
if (evts[i]._w === f)
el.detachEvent("on" + ev, evts.splice(i, 1)[0]);
}
// A handler to call all events we've registered
// on an element for legacy browsers.
function addEventLegacyHandler(e) {
var evts = this._evts[e.type];
for (var i = 0; i < evts.length; ++i)
if (!evts[i].call(this, e || event))
return false;
}
// For older browsers. We basically reimplement
// attachEvent().
function addEventLegacy(el, ev, f) {
if (!el._evts)
el._evts = {};
if (!el._evts[ev])
el._evts[ev] = [];
el._evts[ev].push(f);
return true;
}
function removeEventLegacy(el, ev, f) {
// Loop through the handlers for this event type
// and remove them if they match f.
for (var evts = el._evts[ev] || [], i = evts.length; i--; )
if (evts[i] === f)
evts.splice(i, 1);
}
// Select the appropriate functions based on what's
// available on the window object and return them.
return window.addEventListener
? {addEvent: addEventW3C, removeEvent: removeEventW3C}
: window.attachEvent
? {addEvent: addEventIE, removeEvent: removeEventIE}
: {addEvent: addEventLegacy, removeEvent: removeEventLegacy};
})();
Если вы не хотите использовать такую большую функцию, это должно работать практически во всех браузерах, включая IE:
if (el.addEventListener) {
el.addEventListener('click', function, false);
} else if (el.attachEvent) {
el.attachEvent('onclick', function);
}
В ответ на вопрос Крейга.Вам нужно будет создать новый элемент и скопировать атрибуты старого элемента.Эта функция должна выполнить эту работу:(Источник)
function changeInputType(oldObject, oType) {
var newObject = document.createElement('input');
newObject.type = oType;
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.value) newObject.value = oldObject.value;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.className) newObject.className = oldObject.className;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}
Или вы могли бы использовать jQuery и избежать всех этих проблем:
var execBtn = $("<input>", {
type: "button",
id: "execBtn",
value: "Execute"
})
.click(runCommand);
jQuery также позаботится обо всех кроссбраузерных проблемах.
На самом деле, насколько я знаю, динамически созданные встроенные обработчики событий отлично работают в Internet Explorer 8 при создании с помощью x.setAttribute()
команда;вам просто нужно правильно расположить их в вашем JavaScript-коде.Я наткнулся на решение вашей проблемы (и моей). здесь.
Когда я переместил все мои заявления, содержащие x.appendChild()
на их правильные позиции (т. е. сразу после последней команды setAttribute в их группах) я обнаружил, что КАЖДЫЙ отдельный setAttribute работал в IE8 так, как предполагалось, включая все атрибуты ввода формы (включая атрибуты "name" и "type", а также мои обработчики событий "onclick").
Я нашел это весьма примечательным, поскольку все, что я получил в IE до того, как сделал это, был мусор, отображаемый по экрану, и одна ошибка за другой.Кроме того, я обнаружил, что каждый setAttribute по-прежнему работает и в других браузерах, так что, если вы просто запомните эту простую практику кодирования, в большинстве случаев у вас все получится.
Однако это решение не сработает, если вам придется изменять какие-либо атрибуты "на лету", поскольку они не могут быть изменены в IE после добавления их HTML-элемента в DOM;в этом случае я бы предположил, что нужно было бы удалить элемент из DOM, а затем воссоздать его и его атрибуты (в правильном порядке, конечно!), чтобы они работали должным образом и не выдавали никаких ошибок.
Напишите встроенную функцию, и интерпретатор достаточно умен, чтобы понять, что вы пишете функцию.Сделайте это следующим образом, и предполагается, что это просто строка (которой она технически и является).
function CheckBrowser(){
if(navigator.userAgent.match(/Android/i)!=null||
navigator.userAgent.match(/BlackBerry/i)!=null||
navigator.userAgent.match(/iPhone|iPad|iPod/i)!=null||
navigator.userAgent.match(/Nokia/i)!=null||
navigator.userAgent.match(/Opera M/i)!=null||
navigator.userAgent.match(/Chrome/i)!=null)
{
return 'OTHER';
}else{
return 'IE';
}
}
function AddButt(i){
var new_butt = document.createElement('input');
new_butt.setAttribute('type','button');
new_butt.setAttribute('value','Delete Item');
new_butt.setAttribute('id', 'answer_del_'+i);
if(CheckBrowser()=='IE'){
new_butt.setAttribute("onclick", function() { DelElemAnswer(i) });
}else{
new_butt.setAttribute('onclick','javascript:DelElemAnswer('+i+');');
}
}
Ты пробовал:
execBtn.setAttribute("onclick", function() { runCommand() });
В некоторых случаях приведенные здесь примеры не сработали для меня в Internet Explorer.
Поскольку вы должны установить свойство с помощью такого метода, как этот (без скобок)
HtmlElement.onclick = myMethod;
это не сработает, если вам нужно будет передать имя объекта или даже параметры.Для Internet Explorer вы должны создать новый объект во время выполнения:
HtmlElement.onclick = new Function('myMethod(' + someParameter + ')');
Работает также в других браузерах.
Не имеет отношения к проблеме onclick, но также связано:
Для html-атрибутов, имя которых совпадает с зарезервированными словами javascript, выбирается альтернативное имя, например. <div class=''>
, но div.className
, или <label for='...'>
, но label.htmlFor
.
В разумных браузерах это не влияет setAttribute
.Итак, в gecko и webkit вы бы назвали div.setAttribute('class', 'foo')
, но в IE вы должны использовать вместо этого имя свойства javascript, так что div.setAttribute('className', 'foo')
.
Рассматривали ли вы возможность прослушивания событий вместо установки атрибута?Помимо прочего, он позволяет передавать параметры, с чем я и столкнулся, пытаясь это сделать.Вам все равно придется сделать это дважды для IE и Mozilla:
function makeEvent(element, callback, param, event) {
function local() {
return callback(param);
}
if (element.addEventListener) {
//Mozilla
element.addEventListener(event,local,false);
} else if (element.attachEvent) {
//IE
element.attachEvent("on"+event,local);
}
}
makeEvent(execBtn, alert, "hey buddy, what's up?", "click");
Просто пусть event будет называться как "щелчок" или "наведение курсора мыши".
Я сделал это, чтобы обойти это и двигаться дальше, в моем случае я не использую элемент 'input', вместо этого я использую изображение, когда я попытался установить атрибут "onclick" для этого изображения, я столкнулся с той же проблемой, поэтому я попытался обернуть изображение элементом "a" и сделать ссылку на функцию такой.
var rowIndex = 1;
var linkDeleter = document.createElement('a');
linkDeleter.setAttribute('href', "javascript:function(" + rowIndex + ");");
var imgDeleter = document.createElement('img');
imgDeleter.setAttribute('alt', "Delete");
imgDeleter.setAttribute('src', "Imagenes/DeleteHS.png");
imgDeleter.setAttribute('border', "0");
linkDeleter.appendChild(imgDeleter);
Попробуйте это execBtn.onclick =функция() { eval('runCommand()') };
Для меня это работает.