Вопрос по image, onmouseover, addeventlistener, internet-explorer, javascript – onmouseover не работает при использовании JavaScript для добавления тега img в IE

4

Мне нужен некоторый код JavaScript, который динамически добавляет тег img к div, а тег img нуждается в обработчиках onmouseover и onmouseout.

У меня это работает на Firefox. Но это не совсем работает на IE. В IE добавлен тег img, но обработчики onmouseover и onmouseout не активны.

Вот код:

<body>  
    <div id='putImageHere' />  

    <script type='text/javascript'>
        var node = document.getElementById('putImageHere');
        var img = document.createElement('img');
        img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');
        node.appendChild(img);

        // first attempt, which works on Firefox but not IE
        img.setAttribute('onmouseover', "alert('mouseover')");
        img.setAttribute('onmouseout', "alert('mouseout')");

        // second attempt, which I thought would work on IE but doesn't
        img.addEventListener('mouseover', function() { alert('mouseover') }, false);
        img.addEventListener('mouseout', function() { alert('mouseout') }, false);
    </script>  
</body>  

Ваш Ответ

4   ответа
0

ОбьВ ответе показан правильный метод подключения прослушивателей событий без использования библиотеки JavaScript (и был первым), но я хотел бы добавить следующее:

onmouseover / out никогда не следует прикреплять как атрибуты. По сути, вы прошли через все проблемы не делать

просто сделать это в вашем JavaScript. Обратные вызовы для обработки событий всегда должны быть присоединены как слушатели событий черезattachEvent для IE иaddEventListener для почти всех остальных.

0

IE не поддерживает метод addEventListener. Вы можете проверить обходной путьВот.

В любом случае, почему вы не используете jQuery? Он почти отменяет все проблемы совместимости, имеет несколько дополнительных функций, и он полностью потрясающий.

Спасибо! Использование img.attachEvent работает на IE. Есть причина, по которой я не могу использовать jquery, но моя причина не применима к 99,99% людей, читающих это, поэтому я не буду вдаваться в подробности. Mike W
3
img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');

Не использоватьsetAttribute на HTMLElement, вообще. В Internet Explorer есть ошибки, и вы ничего не получите по сравнению с более удобочитаемой альтернативой DOM Level 1 HTML:

img.src= 'http://sstatic.net/so/img/logo.png';

Существенная проблема сsetAttribute в IE он работает так же, как и обычный доступ к свойству, даже если свойство имеет другое имя или тип атрибута. Итак, это:

img.setAttribute('onmouseover', "alert('mouseover')");

это то же самое, что сказать:

img.onmouseover= "alert('mouseover')";

что не имеет смысла:onmouseover Свойство, как и все обработчики событий, должно быть функцией, а не строкой. Вместо этого назначьте функцию:

img.onmouseover= function() {
    alert('mouseover');
};

и затем вы избавились от неприятной практики в стиле eval - помещать код в строку. Ура!

Что касаетсяaddEventListener, вы можете использовать его, если вы добавите запасной вариантattachEvent вызов IE (у которого есть своя сумасшедшая система прослушивания событий). Но в общем случае, когда у вас когда-либо есть только один слушатель для каждого элемента, гораздо проще придерживаться старой школы, поддерживаемой каждым браузером.onsomethingНазначение обработчиков событий.

+1 за четкое объяснение почемуsetAttribute не работает в IE Tim Goodman
6
if (img.addEventListener) {
    img.addEventListener('mouseover', function() {}, false);
    img.addEventListener('mouseout', function() {}, false);
} else { // IE
    img.attachEvent('onmouseover', function() {});
    img.attachEvent('onmouseout', function() {});
}

(jquery, prototype и т. д.). они скрывают несоответствия браузера, поэтому вам не нужно беспокоиться о написании кода, как описано выше.

Похожие вопросы