[JavaScript - USE - CSS3 ] 자바스크립트를 사용하여 html 태그에 들어오는 이벤트를 차단 (Using JavaScript to block events entering html tags)

특정 태그에 대한 이벤트 받는 형식을 막고 싶을때

예를 들면

input#testEvents:checked+label {

/*  do thing */

} 

인데 do thing 에서 CSS3 애니메이션을 사용한다고 가정할때

ex)  transform: translateX(120%);

해당 애니메이션이 실행안되게 하고싶은데 CSS속성을 똑같이 하나 클롬을 떠서 (js)로 애니메이션만 제외하고 

이런건 너무 무식한 방법 같고 

찾다 보니 events를 받지 못하게 하는 방법이 있다고 해서 적용 해보았습니다.

답은 pointerEvents 

값으로는

auto

none

stroke /* SVG -only  */

fill  /* SVG -only  */

a[href="http://localhost"]{
       pointer-events:none;
}

dfdsfdfsdf

document.querySelector("input#runTag").style.pointerEvents="none";

이벤트를 동작하지 않게 하는 방식입니다.

이외의 속성들을 SVG 온니 이므로 mdn 참조 바랍니다.