html5 캔버스 핸드 커서 문제

나는 작은 스케치 패드를 만들기 위해 html5 및 일부 javacript로 놀고 있습니다. 크롬에서 캔버스를 클릭 할 때마다 커서가 텍스트 커서가됩니다. 나는 커서 넣기 시도 : CSS에 손을,하지만 그 작동하지 않는 것. 이것은 다음과 같이 쉬운 일이있을거야,하지만 난 그것을보고 대신 어디서나 커서 속성에 대한html5 캔버스 핸드 커서 문제

출처

2010-04-17 pfunc

음, 먼저 "커서 : 포인터"가 아닌 "커서 : 손"... – animuson

사용 pointer를 찾을 수있다 :

canvas { cursor: pointer; }

hand는 IE/오페라가 특정, you can see a full list of which cursors work in which browsers here.

출처

2010-04-17 20:46:40

특히이 참고는 언급 된 링크 http://www.quirksmode.org/css/cursor.html#note –

에서 유용합니다. 나는 그것을 넣었지만 여전히 똑같은 일을하고 있습니다. 그것을 확인하십시오 : http://p-func.com/html5_test/test2.html – pfunc

@pfunc - 직접 페이지를 디버깅 할 수 없습니다. 수정해야하는 몇 가지 잘못된 속성이 있습니다. ''이면'

캔버스에서 텍스트 사용 안 함을 사용하십시오. 이것은 매력처럼 작동합니다.

var canvas = document.getElementById('canvas'); 
canvas.onselectstart = function() { return false; } // ie 
canvas.onmousedown = function() { return false; } // mozilla

발생한 문제를 해결하고, 본질적으로의 변화를 구현할 필요가 없습니다 건배, 크리스

출처

2010-07-07 18:03:15 Kris

아름다운! 나는 잠시 동안 이것에 대한 해결책을 찾고 있었는데 누가 그렇게 단순하게 꿈꿔 왔을 까? interwebs의 교정을 위해 : "return false"메소드는 또한 커서가 Chrome에서 i-beam으로 변경되는 것을 방지합니다. 저는 Atwood가 감사의 말로 싫어하는 것을 알지만, 어쨌든 감사합니다! – Toji

웹킷 브라우저의 경우,'body {-webkit-user-select : none; }'귀하의 CSS에. – Jacksonkr

멋진! 그 덕분에 꽤 많은 시간을 절약 할 수있었습니다! – BaronVonKaneHoffen

다른 사람이 절대적으로 쿼크 모드 참조에 당신을 참조에 쾅 동안, 크리스의 대답. 도움이

function handleMouseDown(evt) { 
    evt.preventDefault(); 
    evt.stopPropagation(); 

    // you can change the cursor if you want 
    // just remember to handle the mouse up and put it back :) 
    evt.target.style.cursor = 'move'; 

    // rest of code goes here 
} 

document.addEventListener('mousedown', handleMouseDown, false);

희망 : 내 자신의 구현에서

, 나는 mousedown 이벤트의 기본 동작을 방지하는 것은 성가신 텍스트 선택 커서를 중단해야했습니다 모든 것을 것을 발견했다.

건배, Damon.

출처

2010-09-09 00:06:08

예, 도움이되었습니다. 감사! – shino

html5 캔버스 핸드 커서 문제

답변

관련 문제