2010-04-17 30 views
14

Tôi đang chơi xung quanh với html5 và một số javascript để tạo một sketchpad nhỏ. Bất cứ khi nào tôi nhấp vào canvas trong chrome, con trỏ sẽ trở thành một con trỏ văn bản. Tôi đã thử đặt con trỏ: tay trong css, nhưng điều đó dường như không hoạt động. Đây đã phải là một điều dễ dàng, nhưng tôi nhìn nó lên và không thể tìm thấy nó ở bất cứ đâuhtml5 canvas hand cursor issues

+4

Vâng, trước hết là "con trỏ: con trỏ" không phải "con trỏ: tay" ... – animuson

Trả lời

7

Sử dụng pointer cho tài sản con trỏ của bạn thay vào đó, như thế này:

canvas { cursor: pointer; } 

hand là IE/Opera cụ thể, you can see a full list of which cursors work in which browsers here.

+0

đặc biệt là ghi chú này hữu ích trong liên kết được đề cập http://www.quirksmode.org/css/cursor.html#note –

+0

tôi đặt nó vào nhưng vẫn làm điều tương tự. Kiểm tra ở đây: http://p-func.com/html5_test/test2.html – pfunc

+0

@pfunc - Tôi không thể gỡ lỗi trực tiếp trang của bạn, nó có một vài thuộc tính không hợp lệ cần sửa ... ' ', chúng không thể tự đóng như'

18

Sử dụng chọn văn bản tắt trên canvas. Công việc này như một cái duyên vậy.

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

Chúc mừng, Kris

+2

Đẹp! Tôi đã tìm kiếm một giải pháp cho điều này một thời gian, những người đã có thể mơ ước nó rất đơn giản? Đối với việc sửa đổi của interwebs: phương thức "return false" cũng ngăn con trỏ thay đổi thành i-beam trong Chrome. Tôi biết Atwood không thích mọi người bày tỏ lòng biết ơn bằng lời nói của họ, nhưng cảm ơn bạn! – Toji

+2

Đối với trình duyệt webkit, bạn cũng có thể thêm 'body {-webkit-user-select: none; } 'vào CSS của bạn. – Jacksonkr

+0

đẹp! Điều đó đã cứu tôi khá nhiều thời gian! – BaronVonKaneHoffen

12

Trong khi những kẻ khác đã hoàn toàn đập vào giới thiệu quý vị đến tham khảo quirksmode, rằng sẽ không giải quyết được vấn đề bạn đang gặp phải, và về cơ bản bạn cần phải thực hiện một biến thể của Câu trả lời của Kris.

Thực hiện của riêng tôi, tôi thấy rằng việc ngăn chặn hành vi mặc định trong trường hợp mousedown là tất cả những gì được yêu cầu phải dừng lại pesky con trỏ văn bản lựa chọn:

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); 

Hy vọng rằng sẽ giúp.

Chúc mừng, Damon.

+0

Có, điều đó đã giúp ích. Cảm ơn! – shino