IE8 event.target undefined, getTarget

북마크 추가

테이블이나 li에서 현재 선택된 열을 가져오기 위해 event.target을 많이 사용하는데

 

ie8이하에서는  event.target이 동작하지 않는다. property명이 event.srcElement로 되어있어 undefined 에러가 발생한다.

 

그래서 ie8에서의 호환성을 위해 아래와 같은 함수를 사용한다.


------------------------------------------------------------

javascript

function getTarget(event){

        var targetElement = null;

       //IE9~11
       if (typeof event.target != 'undefined'){
             targetElement = event.target;
       }else{
        //IE ~ 8       
            targetElement = event.srcElement;
       }

       //선택한 li를 찾을때 테이블이면 li 대신 tr
       if (targetElement.nodeName.toLowerCase() == 'li'){
            return targetElement;
       }else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){

            return targetElement.parentNode;
       } else{
            return targetElement;
       }
}​

-----------------------------------------------------------------------

 html 

<li>
      <a href="#" onclick="example(event)">click</a>
      <input type="hidden" name="seq" value="1"/>

</li>

<li>
      <a href="#" onclick="example(event)">click</a>
      <input type="hidden" name="seq" value="2"/>

</li>

<li>
      <a href="#" onclick="example(event)">click</a>
      <input type="hidden" name="seq" value="3"/>

</li>

-----------------------------------------------------------------------

Usage

​특정 row를 클릭했을때 해당 li의 seq 값을 가져오는 방법 예

​function example(e){

     var target = getTarget(e); // == e.target.parent(); => selected <li>

     var seq = target.children.seq.value; // = selected <li>'s children <input name = seq>

      .

      .

      .

}

 

 

실행예제 :: http://trandent.com/jsTest/10545920156916

HKH
2015-06-03 10:56
SHARE
keyboard_arrow_left
keyboard_arrow_up