javascript - нужен - универсальный атрибут формы




Почему свойство onclick, установленное с setAttribute, не работает в IE? (10)

В этот день встала проблема, отправляя сообщения, если у кого-то другая проблема.

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);

В некоторых случаях приведенные здесь примеры не помогли мне в Internet Explorer.

Поскольку вы должны установить свойство таким способом (без скобок)

HtmlElement.onclick = myMethod;

он не будет работать, если вам нужно передать имя объекта или даже параметры. Для Internet Explorer вы должны создать новый объект во время выполнения:

HtmlElement.onclick = new Function('myMethod(' + someParameter + ')');

Работает также и в других браузерах.


Вы считали слушателя событий, а не устанавливали атрибут? Помимо прочего, он позволяет вам передавать параметры, которые были проблемой, с которой я столкнулся при попытке сделать это. Вам все равно нужно сделать это дважды для 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");

Просто позвольте событию быть именем типа «щелчок» или «наведение мыши».


На самом деле, насколько я знаю, динамически созданные встроенные обработчики событий DO отлично работают в Internet Explorer 8 при создании с помощью команды x.setAttribute() ; вам просто нужно правильно разместить их в своем JavaScript-коде. Я наткнулся на решение вашей проблемы (и моей) here .

Когда я переместил все мои утверждения, содержащие x.appendChild() в их правильные позиции (т. Е. Сразу после последней команды setAttribute в своих группах), я обнаружил, что КАЖДЫЙ одиночный setAttribute работал в IE8, как и предполагалось, включая все входные данные формы атрибуты (включая атрибуты «имя» и «тип», а также мои обработчики событий onclick).

Я нашел это весьма примечательным, так как все, что я получил в IE, прежде чем я это сделал, это мусор, оказанный по экрану, и одна ошибка за другой. Кроме того, я обнаружил, что каждый setAttribute все еще работал в других браузерах, поэтому, если вы просто помните эту простую практику кодирования, в большинстве случаев вам будет хорошо.

Однако это решение не будет работать, если вам придется менять любые атрибуты «на лету», так как они не могут быть изменены в IE, когда их HTML-элемент добавлен в DOM; в этом случае я бы предположил, что нужно было бы удалить элемент из DOM, а затем воссоздать его и его атрибуты (в правильном порядке, конечно!), чтобы они работали правильно, а не бросали какие-либо ошибки.


Напишите функцию inline, и интерпретатор достаточно умен, чтобы знать, что вы пишете функцию. Сделайте это так, и он предполагает, что это просто строка (которая технически есть).


Попробуйте выполнить execBtn.onclick = function () {eval ('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
}

Это потрясающая функция для привязки событий, совместимых с браузером.

Получил это от 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); 
} 

В ответ на вопрос Крейга. Вам нужно будет создать новый элемент и скопировать атрибуты старого элемента. Эта функция должна выполнять задание: ( source )

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;
}

прекрасно работает!

использование обоих способов кажется ненужным сейчас:

execBtn.onclick = function() { runCommand() };

видимо, работает в каждом текущем браузере.

протестированы в текущих Firefox, IE, Safari, Opera, Chrome на Windows; Firefox и Epiphany на Ubuntu; не протестированы на Mac или мобильных системах.

  • Крейг: Я бы попробовал «document.getElementById (ID) .type =« пароль »;
  • Кто-нибудь проверил подход AddEventListener с разными двигателями?

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+');');
    }
}




internet-explorer