달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
[link] http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=53802



mouseover나 mouseout 시에 이벤트가 지정된 개체의 내부 개체로 이동해도 이벤트는 발생합니다.

# 예를들어 개체에서 내부 개체로 마우스가 이동하면

부모개체 out > 자식개체 over > 부모개체 over
이 일어납니다.

# 자식 개체에서 부모 개체로 이동하면

자식개체 out > 부모개체 out > 부모개체 over
이 일어납니다.


자식over > 부모over 이나 자식out > 부모out 은 cancelBubble/stopPropagation() 으로 방지 가능한데(테스트 안해봤지만 아마 그럴 겁니다) 부모개체로의 단독 이벤트라면 안통하죠.

링크 참조하셔서 바로 테스트 해보시면 이해 가실 겁니다.


그걸 방지하는 소스입니다.



간단합니다.

over시의 from 개체나 out시의 to 개체가 이벤트 지정 개체의 자식 개체이면 그냥 리턴시키고, 아니면 함수 계속...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mouse event test</title>

<style type="text/css">
div {width:50% ; text-align:center ; margin:0 auto ; border:1px solid #000}
</style>

<script type="text/javascript">
function mouseover(e,obj) {
    var from = e?e.relatedTarget:event.fromElement;

    while(from) {
        if(from == obj) return;
        from = from.parentNode;
    }

    alert("mouseover 체크");
}

function mouseout(e,obj) {
    var to = e?e.relatedTarget:event.toElement;

    while(to) {
        if(to == obj) return;
        to = to.parentNode;
    }

    alert("mouseout 체크");
}

</script>

</head>

<body>
<div onmouseover="mouseover(arguments[0],this)" onmouseout="mouseout(arguments[0],this)"># mouse over/out 체크
    <div>middle
        <div>in</div>
    middle</div>
out
</div>
<br />
<div onmouseover="alert('일반 mouseover')" onmouseout="alert('일반 mouseout')"># 일반 mouse over/out
    <div>middle
        <div>in</div>
    middle</div>
out
</div>
</body>
</html>
Posted by tornado
|