this.style.backgroundColor don't work in IE7/8

my code is:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        p{
            border:1px solid #CCC;
            margin:5px;
            padding:5px;
        }
    </style>
    <script type="text/javascript">
        window.onload = changeColor;
        function changeColor() {
            for(var i =0; i < document.getElementById("main").getElementsByTagName("p").length; i++) {
                var obj = document.getElementById("main").getElementsByTagName("p")[i];
                if (window.addEventListener) {
                    obj.addEventListener('mousemove', function () {
                        this.style.backgroundColor ="#EEE";
                    }, false);
                    obj.addEventListener('mouseout', function () {
                        this.style.backgroundColor ="#FFF";
                    }, false);
                } else if (window.attachEvent) {
                    //for ie
                    obj.attachEvent('onmousemove', function () {
                        this.style.backgroundColor ="#EEE";
                    });
                    obj.attachEvent('onmouseout', function () {
                        this.style.backgroundColor ="#FFF";
                    });
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <p>1</p>
        <div id="main">
            <p>2.1</p>
            <p>2.2</p>
            <p>2.3</p>
        </div>
    </div>
</body>
</html>

it work well in Chrome、FireFox and ie9,but can't work in IE7/8

the error message is:Unable to set the property value of the "backgroundColor": the object is null or undefined

what's rong with me?

标签： javascript background-color onmousemove attachevent

2条回答

叛逆

2楼-- · 2019-06-10 02:43

When using attachEvent in IE, this is set to the window object, not to the object that the event happened on.

In IE, the global variable window.event.srcElement will contain the target object for the event.

You could code a work-around like this to make all the event handlers work the same:

function hookEvent(event, obj, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false);
    } else {
        obj.attachEvent("on" + event, function() {return(fn.call(obj, window.event));});
    }
}

This will make it so that this is set to the source object of the event and that the argument to the event handler is the event object.

0人赞添加讨论(0) 举报

男人必须洒脱

3楼-- · 2019-06-10 02:45

this is not bound to the source element in IE's attachEvent.

Use event.srcElement instead.

Also note that the event global object property and its srcElement property are IE-specific as well.

0人赞添加讨论(0) 举报

this.style.backgroundColor don't work in IE7/8

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间