javascript - JS 이벤트 버블링 문제

Question

케이스 종료: CSS를 사용하여 이 효과를 얻으세요.

도와주셔서 감사합니다. 이 효과를 구현하기 위해 CSS로 전환했습니다.

1. 다음 코드에서는 캔버스 애니메이션을 트리거하기 위해 a 태그의 mouseover 및 mouseout 이벤트를 수신했습니다. mouseover 및 mouseout 콜백에서는 이벤트 버블링이 방지되었지만 마우스가 a 내부에 두 개의 스팬이 있습니다. a의 마우스아웃이 트리거되고, a로 돌아갈 때 마우스오버가 다시 트리거되어 애니메이션이 중단되고 반복적으로 실행되었습니다.

다음 코드에 어떤 문제가 있는지 알려주세요.

애니메이션 사진을 추가했습니다!

으아악

Answer 1

试试这样
Poke me=>addEventListener

으아악

Answer 2

1. 먼저 코드에 문제가 있습니다. 마우스를 캔버스에 놓았을 때만 애니메이션이 실행되지 않습니다.

2. 둘째, 이벤트 캡처는 차단할 수 없으며 이벤트 버블링은 하위 요소에서 상위 요소로 이루어지므로 stopPropagation()의 애플리케이션 객체는 a

의 하위 요소여야 합니다.

3. 마우스 입력 및 제거만 모니터링하려면 mouseenter 및 mouseleave 이벤트를 사용해야 한다고 생각합니다. 여기를 참조하세요

Answer 3

도와주셔서 감사합니다. 이 효과를 구현하기 위해 CSS로 전환했습니다.