좋아,이 질문은 다소 복잡하게 들릴 수도 있고, 적어도 난해 할 수도 있지만, 나는 해명하기 위해 최선을 다할 것이다.div를 다른 뒤에 배치했지만 여전히 위에 표시됩니까?
내 차트 응용 프로그램에는 팝업 도구 팁으로 사용되는 div가 있습니다. 이 툴팁은 데이터 포인트 위로 마우스를 올리면 표시되며 몇 가지 정보를 제공합니다. 나는 기본 차트 div 위에 툴팁을 렌더링하기 위해 z-index를 사용했다. 그러나 기본 차트에는 마우스 이벤트와의 상호 작용이 있으므로 마우스가 툴팁 위로 마우스를 올려 놓았음에도 기본 차트에 마우스 이벤트를 등록 할 수 있습니까?
실제로 css3을 지원하는 브라우저에서는 pointer-events이 가장 간단한 솔루션입니다. :)
좌표를 기록한 마우스 이벤트를 캡처 한 다음이 좌표를 페이지와 관련된 툴팁의 실제 위치에 추가 할 수 있습니다. 그런 다음 기본 요소에서 기본 div 요소의 좌표를 뺀 좌표를 사용하여 가짜 MouseEvent을 다시 사용할 수 있습니다.
마우스 이벤트 캡처에 대한 답변에 동의하는 반면 해결 방법이 있다고 생각합니다. 툴팁 div를 마우스 커서에서 몇 픽셀 떨어진 위치에 놓기 만하면됩니다. 그런 식으로 마우스 커서 아래에 나타나지 않으며 클릭 할 수 없습니다.
오, 툴팁은 마우스 커서를 기준으로 한 위치에 나타나지 않고 대신 선택되는 데이터 포인트에 상대적으로 나타납니다. 일부 데이터 세트에서는 엄청난 양의 데이터가 있기 때문에 어느 지점을 선택해야하는지 더 명확하게 알 수 있기 때문입니다. 그래도 좋은 제안. –
나는이 솔루션을 더 좋아해. 근사하지는 않지만 구현하기가 훨씬 쉽다. 툴팁의 mouseOver 이벤트를 사용하여 그냥 a) 왼쪽/오른쪽 상자의 너비, b) 툴팁 높이를 위/아래로 부딪 힙니다. 여기에서 볼 수있는 유일한 문제는 사용자가 툴팁 텍스트를 복사하려고하는 경우입니다. – abelito
실제 상황인지 아닌지는 잘 모르겠지만 툴팁을 자식 요소로 데이터 요소에 추가 할 수 있습니다. 그런 식으로 여전히 차트의 일부입니다.
그건 실제로 상당히 간단하고 우아한 해결책입니다. 나는 이것들을 최고로 좋아하지만 문제는 모든 데이터 포인트가 단순히 캔버스 태그 위에 그려지는 것입니다. 그러나, 아마도 캔버스 태그를 포함하는 div에 툴팁을 추가 할 수 있습니다 (div는 마우스 이벤트를 발생시킵니다). 그런 다음 절대 위치 지정을 사용합니다. –
이제 그게 지독한 설명이지만, 나는 동의 할 수 없습니다! 그리고 실제로 그것이 그것이 유일한 방법이라고 생각합니다. – jolt
특정 페이지 좌표에서 클릭 이벤트를 위조하는 것이 가능하지 않다고 생각했습니다. 나는 틀린가? – user113716
@patrick, http://www.howtocreate.co.uk/tutorials/javascript/domevents –