Tôi có chương trình kéo giao diện người dùng, nơi con trỏ chuột trên phần tử có thể kéo sẽ thay đổi thành bàn tay đang nắm bắt khi nhấp.Thay đổi Con trỏ chuột cho toàn bộ trang?
Vấn đề là, tôi cho phép kéo để xảy ra bất cứ nơi nào trên màn hình, và những thay đổi con trỏ trên thẻ neo, vv ...
Tôi đã thử $('*').addClass('grabbing'), nhưng nó thực sự tốn kém.
Có cách nào đơn giản dễ dàng để xử lý mã này không?
Do nó ở cấp độ CSS:
* {
cursor: pointer;
}
làm việc đó trong lực lượng jquery nó lặp đi lặp lại mỗi nút duy nhất trong dom và viết lại lớp css của nó. Trên một tài liệu dài, đó là một sự lãng phí thời gian rất lớn.
Nhưng điều này sẽ luôn hoạt động. Con trỏ chỉ cần thay đổi trong khi con chuột bị tắt. Nó cần phải xảy ra trong Javascript bằng cách nào đó. – Wesley
Bạn có thể tự động thêm/xóa quy tắc css thông qua javascript. Chỉ cần làm điều đó từ bên trong onmousedown/onmouseup và nó sẽ nhanh hơn việc thêm/gỡ bỏ các lớp từ mọi nút dom trên trang. –
@Mark B Cool. Bạn có thể cung cấp một câu trả lời mới với một ví dụ? Tôi sẽ cho nó một shot và nếu nó hoạt động đúng, tôi sẽ đánh dấu nó. – Wesley
thử
$('body').addClass('grabbing');
HOẶC
$(document).addClass('grabbing');
// edited trả lời này
$('body').mousedown(function(e){
$(this).css({'cursor':'pointer'});
}).mouseup(function(e){
$(this).css({'cursor':'auto'});
});
Nếu bạn firebug được bật, bạn có thể thấy những thay đổi trong thẻ phong cách cơ thể. Nhưng một số cách nó không hoạt động. Bạn có thể lấy nó làm tài liệu tham khảo và thử cách tiếp cận tương tự giải pháp get.
Sẽ không thuê các yếu tố ZIndex ghi đè lên đó? –
@MikeChristensen Chính xác. Điều này sẽ không hoàn toàn làm điều đó. – Wesley
Cách duy nhất tôi có thể nghĩ là thực hiện điều này khá dễ dàng.
Tạo DIV có chỉ mục z cao hơn một số thứ khác trên trang đó và có con trỏ bạn muốn. Bật div đó bất cứ khi nào con trỏ chuột ngừng hoạt động. Mẫu mã:
<html><body style="width: 100%; height: 100%;">
<DIV id="cover" style="position: absolute; width: 100%; height: 100%; zindex: 5000; top: 0px; left: 0px; cursor: pointer; background: transparent; display: none;"> </div>
<ul><li>One</li><li>Two</li><li>Three</li></ul>
<script>
window.document.body.onmousedown = function()
{
document.getElementById('cover').style.display = '';
};
window.document.body.onmouseup = function()
{
document.getElementById('cover').style.display = 'none';
};
</script>
</body></html>
Xem thêm: http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page –