判断鼠标进入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断鼠标进入</title>
</head>
<body>
    <script type="text/javascript">
                // 矩形区域信息
        var rectX = 120;
        var rectY = 238;
        var rectWidth = 200;
        var rectHeight = 200;

        var rect = document.createElement("div");
        rect.style.position = "absolute";
        rect.style.top = rectY + "px";
        rect.style.left = rectX + "px";
        rect.style.width = rectWidth + "px";
        rect.style.height = rectHeight + "px";
        rect.style.border = "1px solid black";
        rect.style.boxSizing = "border-box";

        var body = document.getElementsByTagName("body")[0];
        body.appendChild(rect);

        rect.onmousemove = null;


        // 捕获鼠标移动
        document.onmousemove = function(event){
            // console.log('chatch mouse', event.clientX,",",event.clientY);
            
            var offsetX = event.clientX;
            var offsetY = event.clientY;
        // 判断点进入矩形
        if((offsetX >= rectX && offsetX <= rectX + rectWidth)  && (offsetY >= rectY && offsetY <= rectY + rectHeight)){
            console.log("point enter");
            rect.style.backgroundColor = "yellow";
        }else{
            rect.style.backgroundColor = "black";
        }

    

        }
    </script>
</body>
</html>

posted @ 2019-03-08 21:26  zhencool  阅读(141)  评论(0)    收藏  举报