js鼠标移动触发问题

JavaScript019

js鼠标移动触发问题,第1张

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>

添加onmouseover 事件即鼠标移入对象时触发的时间js图片自动切换 用的是js的定时器方法吧添加onmouseover 事件方法中可以写一段脚本 终止定时器的作用。则可以停止切换onmouseout 在鼠标从元素上离开后会触发的事件 可以再写方法让定时器生效。还有什么不明白的可以追问

在DOM中。因为会有嵌套结构，因此如果鼠标指针父DIV移动到内部的子DIV上，会触发mouseout事件，这并不是bug或者什么歧义，因为mouseout的意思就是从一个元素移动到另一个元素上。并没有说另一个元素就不能是当前元素的子元素。但你的要求依然是可以实现的。就是利用事件冒泡。例如：

html中。

<html>

<head lang="en">

    <meta charset="UTF-8">

</head>

<body style="padding:0margin:0">

<div id="sDiv" style="height:500pxbackground:blackpadding:1px">

<div id="cDiv" style="height:100pxmargin:200pxbackground:red"></div>

</div>

</body>

<script>

js这样写：

window.onload = function(){

    document.getElementById('sDiv').onmouseout = function(e){

        var ev = e || window.event

        var target = ev.target || ev.srcElement

        if(target.id === 'sDiv' && (!ev.toElement || ev.toElement.id !== 'cDiv')){

            alert('鼠标移动出了父DIV元素。')

        }

    }

}

说白了。就是如果是移动到子元素中，不认为是移出父元素就好了，因此更加通用的写法如下：

function isParent (obj,parentObj){ 

while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){ 

    if (obj == parentObj){ 

        return true 

    } 

    obj = obj.parentNode 

} 

return false 

} 

window.onload = function(){

document.getElementById('sDiv').onmouseout = function(e){

    var ev = e || window.event

    var target = ev.target || ev.srcElement

    if(target.id === 'sDiv' && (!ev.toElement || !isParent(ev.toElement, target))){

        alert('鼠标移动出了父DIV元素。')

    }

}

}