div에서 이벤트를 실행하지만 호버를 통과합니다.

절대적으로 다른 div 위의 div가 있고 mouseover, mouseout 및 click 이벤트가있는 div와 click 이벤트가있는 상단 div가 있어야합니다.div에서 이벤트를 실행하지만 호버를 통과합니다.

아래의 div에서 마우스 이벤트를 가져올 수있는 유일한 방법은 포인터 이벤트를 추가하는 것입니다. 위 div에 none을 입력하고 위의 div는 해당 CSS 속성이있을 때 클릭 이벤트를받지 않습니다.

여기서 문제

2013-12-11 Wryte

그리고 어떻게 상단 div와 하단 div를 동시에 클릭 하시겠습니까? 당신이 원하는 것은 99 %의 시간에 당신의 전체 개념에 결점이 있으며 재고 할 필요가 있다는 것을 의미합니다. – adeneo

글쎄, 그들은 서로의 위에 있기 때문에 하나를 클릭하면 둘 다 클릭하게됩니다. 진짜 문제는 호버 이벤트가 맨 위로 이동하지 않는다는 것입니다. 또한 위쪽 하나는 반투명하므로 맨 아래쪽에있는 호버 이벤트를 사용하는 것이 바람직합니다. – Wryte

코드에서 볼 수 있듯이 전파하는 이벤트가 중지되지 않으므로 두 이벤트에서 모두 클릭 이벤트를 잡을 수 있어야합니다. 아래쪽 레이어에 마우스 이벤트 리스너를 추가하고이를 통해 무언가를 수행하는지 확인할 수 있습니다. –

@Wryte AH를 나타내는 codepen있다! 좋아, 당신이 성취하고자하는 것에 문제가있다. 그늘은 안쪽 DIV의 나머지 부분을 덮는 전체 바깥 쪽 부분 위에 레이어로 된 컨테이너가 아닙니다. 음영 div가 이벤트 버블 링을 위해 체인에 없기 때문에 호출되지 않거나 음영 DIV에서 이벤트를 잡으면 내부 DIV에 트리거 된 이벤트를 얻지 못합니다. 할 수있는 일은 바깥 쪽 DIV를 어둡게하고 안쪽 DIV에 투명도를 추가하는 것입니다. 왜 DIV 그늘에서 이벤트를 추적해야합니까?

출처

2013-12-11 18:23:55

과 유사 할 수 있습니다. 이것이 모달 팝업의 그늘이라면 모달을 닫고 음영을 숨기려면 클릭이 필요하지만 음영을 클릭하기 전에 음영 아래의 요소에 호버 이벤트가 발생합니다. – Wryte

매우 흥미 롭습니다. 클릭 이벤트의 그늘을 다루는 것이 좋습니다 (설명하는 방식). 그러면 마우스 이벤트가 그 뒤의 DIV를 간질이게합니다.). hideShowShade 함수를 만들고 필요할 때마다 호출 할 수 있습니다. –

div에서 이벤트를 실행하지만 호버를 통과합니다.

답변

관련 문제