z-index'd 레이어의 클릭 이벤트 처리

StackOverflow https://stackoverflow.com/questions/1026060

문제

내가 빌드하는지도 애플리케이션에 2 개의 z- 인덱스 레이어가 있습니다. 축소하기 위해 레이어를 클릭 할 때 문제가 있습니다. 클릭 핸들러는 기본 Z-Index 레이어에 있으며 위에있는 레이어의 컨트롤이 클릭 될 때 발사를 원하지 않습니다.

내가 가진 문제는 이벤트가 무엇이든 상관없이 이벤트가 제기되지만 이벤트의 원래 표적 속성은 상단 레이어의 무언가를 클릭 할 때 기본 레이어의 이미지가 아니라는 것입니다. 어쨌든 이것을 바꿀 수 있습니까?

도움이 되었습니까?

해결책

그것은 이벤트-버블 링이라고하며, 당신은 event.stopPropagation() 방법 (event.cancelBubble() 즉,). 또한 요소에 대한 속성에 대해 호출 된 핸들러에서 True/False를 반환하여 제어 할 수도 있습니다. 까다로운 주제이므로 몇 가지를 할 것을 제안합니다. 연구.

정보 : 취소 버블, 스톱 포거레이션

다른 팁

이것은 문제를 직접 해결하지는 않지만 더 피팅 솔루션이 제시 될 때까지 실행 가능한 해결 방법 일 수 있습니다.

OnClick을 호출 할 단일 함수를 작성하고 기능을 충분히 스마트하여 누가 전화했는지 알 수 있습니다. 그런 다음 기능은 누가 클릭 한 사람을 기반으로 적절한 조치를 취합니다. 독특한 것을 거의 보내고 스위치를 사용할 수 있습니다.

단순화 된 예 :

<html>
<body>

<script type="text/javascript">
function myClickHandle(anID)
{
switch(anID){
case 'bottom': 
      alert("I am on the bottom");
      break;
case 'top':
      alert("I am on the top");
      break;
}
}
</script>

<html>
<div style="z-index:10"><input type=button value='top' onclick="myClickHandle(this.value)"/></div>
<div style="z-index:11"><input type=button value='bottom' onclick="myClickHandle(this.value)"/></div>
</body>
</html>

가장 모범 사례는 컨트롤이 상단 계층으로 이동할 때 이벤트 핸들러를 분리하고 컨트롤이 하단 계층으로 돌아 오면 이벤트를 다시 잡을 수 있다고 생각합니다.

그레이트 Z- 인덱스를 가진 요소보다 우선 순위

http://api.jquery.com/event.stoppropagation/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top