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
Trả lời
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.
đặ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 –
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
@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ư' '. Ngoài ra còn có thêm một thẻ '
' ở đó ... không thể gỡ lỗi hành vi funky cho đến khi nó hợp lệ :) –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
Đẹ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
Đố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
đẹp! Điều đó đã cứu tôi khá nhiều thời gian! – BaronVonKaneHoffen
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.
Có, điều đó đã giúp ích. Cảm ơn! – shino
- 1. Tôi có sử dụng Cursor Hand và Cursor Pointer hoặc cả hai?
- 2. HTML5 hoặc JQuery Full Screen Crosshair Cursor
- 3. html5 canvas strokeStyle?
- 4. HTML5 Canvas eraser
- 5. HTML5 Canvas: Phóng to
- 6. Tách trong canvas HTML5?
- 7. Html5 Canvas Limitations
- 8. "Xóa" trong html5 canvas
- 9. HTML5 Canvas ảnh Scaling Issue
- 10. HTML5 canvas nhấp chuột kiện
- 11. HTML5 Canvas: Biểu tượng độ
- 12. HTML5 Canvas Creative Alpha-Blending
- 13. Chèn từ trong HTML5 Canvas
- 14. HTML5 Canvas set z-index
- 15. HTML5 canvas khung tiên tiến
- 16. HTML5 Tự động tạo Canvas
- 17. HTML5 Canvas - Strokes khác nhau
- 18. Overlay HTML5 canvas over image
- 19. Trộn HTML5 Canvas và Python
- 20. HTML5 lưu canvas vào tệp
- 21. Tạo HTML5 Canvas lập trình
- 22. Animated GIF trong HTML5 canvas
- 23. html5 <canvas> framerate
- 24. HTML5 tạo ảnh nền canvas
- 25. HTML5 canvas "đặt lại" fillStyle
- 26. chờ animation với HTML5 Canvas
- 27. Thay đổi con trỏ trên Canvas HTML5 khi kéo chuột
- 28. mb_convert_encoding issues
- 29. Chuyển động jpeg trong html5 canvas
- 30. HTML5 xoay hình ảnh bằng canvas
Vâng, trước hết là "con trỏ: con trỏ" không phải "con trỏ: tay" ... – animuson