con trỏ tùy chỉnh bên ngoài cửa sổ trình duyệt

Question

Tôi có một yếu tố trên trang web của mình có thể tự do thay đổi kích thước. Điều này được thực hiện bởi 4 tay cầm trên các cạnh. Khi di chuyển các chốt này và trong khi thay đổi kích thước phần tử tôi muốn hiển thị các mũi tên thay đổi kích thước tương ứng.

Hiện tại tôi đã triển khai hành vi này bằng cách đặt kiểu con trỏ css của thân/gốc thành các mũi tên này. Vấn đề về nó là giới hạn cho khu vực khách hàng của cửa sổ trình duyệt. Nó sẽ trực quan phù hợp hơn và ít gây nhầm lẫn, nếu con trỏ mũi tên sẽ hiển thị ở khắp mọi nơi trong khi con chuột được giữ.

Google Maps đang thực hiện tương tự với con trỏ chuột của họ trong khi di chuyển bản đồ. Vì vậy, câu hỏi của tôi là làm thế nào để đạt được hiệu ứng này trên của riêng tôi.

My hiện tại (có liên quan) nguồn:

function startObjectScaling(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    document.documentElement.style.cursor = this.style.cursor; 
    window.addEventListener("mouseup", stopObjectScaling, false); 
} 

function stopObjectScaling(e){ 
    e.stopPropagation(); 
    document.documentElement.style.cursor = ''; 
    window.removeEventListener("mouseup", stopObjectScaling); 
} 

[...] 

var tg = document.getElementById("transformGadget"); 
var handle = tg.firstChild.nextSibling; 
for(var i=0;i<4;i++){ 
    handle.addEventListener("mousedown", startObjectScaling, false); 
    handle = handle.nextSibling; 
} 

Answer 1

Có một chức năng đặc biệt được triển khai trong các trình duyệt hiện đại hơn cho mục đích này. Tên là setCapture(). Nó chuyển hướng tất cả đầu vào chuột đến đối tượng mà phương thức được gọi. Bây giờ, một định nghĩa đơn giản là con trỏ trên phần tử đó là đủ để lưu trữ hiệu ứng mong muốn. Sau khi phát hành chuột, hiệu ứng này sẽ dừng (để đảm bảo an toàn). Nó cũng có thể được ngừng lại bằng tay bằng cách gọi releaseCapture

dụ:

<style type="text/css"> 
#testObj { 
    /* this cursor will also stay outside the window. 
     could be set by the script at the mousedown event as well */ 
    cursor: hand; 
} 
</style> 

[...]

document.getElementById('testObj').onmousedown = function(e){ 

    // these 2 might be useful in this context as well 
    //e.stopPropagation(); 
    //e.preventDefault(); 

    // here is the magic 
    e.target.setCapture(); 
} 

Answer 2

nếu mũi tên con trỏ sẽ được hiển thị ở khắp mọi nơi trong khi chuột là giữ.

Bạn đang dựa vào khả năng mở rộng hệ điều hành tiềm năng để tạo hành vi của mình. Đây không phải là điều bạn có thể ASSUME sẽ luôn đúng. Tuy nhiên, khi bạn bắt đầu một con chuột, con trỏ tại điểm đó thường sẽ giữ nguyên, bất kể bạn di chuyển con chuột đến đâu, UNTIL cái gì khác (một cửa sổ khác mà bạn có thể di chuột qua? Máy tính để bàn? Một hệ thống ngắt?) con trỏ.

Nói cách khác, không dựa vào hành vi này. Tìm cái gì đó khác sẽ làm việc cho bạn. Nếu bạn phải làm điều này, hãy kiểm tra lại các yêu cầu kinh doanh của bạn.