HTML5 넣기 <canvas> 안에 <table>은 마우스 이벤트를 무효로합니다.

나는 누가 나를 따라 오는지에 대한 답을 찾았습니다.

마우스 메시지가 완전히 이상한 것은 아니며 계속 발생했습니다. 그러나 마우스의 x와 y 좌표는 완전히 응답하지 않았습니다.

나는 다음과 같이 캔버스의 마우스의 위치에서 오프셋 빼서 내 마우스의 좌표를 계산했다 : 불행하게도

var x = event.pageX - canvas.offsetLeft; 
var y = event.pageY - canvas.offsetTop;

, 이것은 신뢰할 수없는의 canvas 개체의 오프셋과 관련하여 항상하지 않기 때문에 문서 본문에. 테이블 안에있을 때 그들은 <td>에 상대적이었고 canvas은 내부에있었습니다. 따라서 좌표가 벗어나서 canvas 개체가 마우스에 완전히 응답하지 않는 것처럼 보입니다.

var rect = canvas.getBoundingClientRect(); 
var x = event.clientX - rect.left; 
var y = event.clientY - rect.top;

이 신들 만 getBoundingClientRect() 기능이 얼마나 효율적으로 알고, 그리고 부동 소수점 오히려 좌표와 내가 다루고있어 것을 의미하기 때문에, 조금 kludgey 것 같다

나는이와 그 라인을 교체 정수 좌표보다. 그러나 내가 계산 한 x와 y는 정확하며 더 중요합니다.

다른 사람들에게 도움이되기를 바랍니다.

출처

2017-03-21 01:09:18

성능이 현명하고, gBCR은 '.offsetLeft'와'.offsetTop'와 정확히 같아야합니다. 고정 된 속성처럼 보이는 래터라도 실제로 정확히 같은 방식으로 gBCR을 다시 계산합니다. (물론 DOMRect를 생성하고 있기 때문에 약간의 차이가있을 수 있지만 루프를 반복하지 않을 경우 걱정하지 않아도됩니다. – Kaiido

Thanks @Kaiido. 좋은 출처를 가지고 있습니까? JavaScript 프로그램이 효율적인지 아닌지를 결정하는 방법에 대한 정보 기본 프로그래밍 방법 (예 : 복잡성 분석)을 제외하고는 항상이 사실을 알지 못합니다. –

HTML5 넣기 <canvas> 안에 <table>은 마우스 이벤트를 무효로합니다.

답변

관련 문제