onmouseover не работает при использовании JavaScript для добавления тега img в IE - PullRequest
Новая
       27

onmouseover не работает при использовании JavaScript для добавления тега img в IE

4 голосов
/ 12 ноября 2009

Мне нужен некоторый код 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 ]

7 голосов
/ 12 ноября 2009 
if (img.addEventListener) {
    img.addEventListener('mouseover', function() {}, false);
    img.addEventListener('mouseout', function() {}, false);
} else { // IE
    img.attachEvent('onmouseover', function() {});
    img.attachEvent('onmouseout', function() {});
}

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

3 голосов
/ 12 ноября 2009 
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.

0 голосов
/ 12 ноября 2009

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

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

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

0 голосов
/ 12 ноября 2009

Оказывается, IE не поддерживает метод addEventListener. Вы можете проверить обходной путь здесь .

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

...