js判断鼠标移动

JavaScript04

js判断鼠标移动,第1张

用on事件,就是onmousemove(每一个像素移动)

原型:Element.onmousemove = function (){

    ...

}

实例:window.onmousemove = function (){

    alert('鼠标移动了!')

}

另外,拖动(理解不了题目具体)用on事件,就是ondragstart(选择元素并拖动了)

原型:Element.ondragstart = function (){

    ...

}

实例:window.ondragstart = function (){

    alert('鼠标拖动了元素!')

}

getElementsByClassName ,IE下不支持

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>test</title> 

<style>

div{width: 500px height: 300px border: 1px solid Yellow}

.tt{display: block}

</style>

<script>

window.onload = initClass

function initClass() {

    var classTest = document.getElementsByTagName("div")

    for (var i = 0 i < classTest.length i++) {

        if (classTest[i].className == "t") {

            var tts = classTest[i].querySelectorAll(".tt") || classTest[i].getElementsByTagName("div")

            classTest[i].onmouseover = function() {

                overTest(tts[0])

            }

            classTest[i].onmouseout = function() {

                outTest(tts[0])

            }

        }

    }

}

function overTest(tt) {

    tt.style.display = "block" /*鼠标移上*/

}

function outTest(tt) {

    tt.style.display = "none" /*鼠标移走*/

}

</script>

<body>

 <div class="t">ddddddddddddd

  <div class="tt">fffffffffffffffff</div>

 </div>

</body>

</html>