phát hiện trạng thái hiện tại của một con chuột trong javascript hoặc jquery tức là xuống hoặc lên

Question

Tôi đang xây dựng một ứng dụng web liên quan đến việc kéo và thả văn bản từ bên trong trang web và từ các ứng dụng khác ví dụ như tài liệu từ và pdf. Tôi cần để có được trạng thái hiện tại của con chuột nếu nó xuống (nhấp) hoặc lên (phát hành). Hiện tại tôi có thể nhận trạng thái hiện tại của con chuột nếu tôi đang kéo văn bản trong trang web nhưng không thể nhận trạng thái chuột nếu chuột đến từ một ứng dụng khác nói từ và kéo một số văn bản. Bất kỳ con trỏ nào để có được trạng thái xuống hoặc lên của chuột đều thực sự được đánh giá cao.

Answer 1

Vấn đề như tôi hiểu nó là bạn cần phải xác định xem nút chuột trái được nhấn nếu nó được ép bên ngoài cửa sổ (đối với một thao tác kéo).

Có một số vấn đề:

• không có sự kiện MouseMove sa thải trong một hoạt động kéo
• dữ liệu của các quốc gia nút hiện tại khác nhau giữa các trình duyệt

tôi đã đưa ra với điều này giải pháp:

/** 
* keeps track of the current active mouse button. 
* @param notifier {Function} called when the active button is updated. 
* @param oneCallPerStateChange {Boolean} (defaults to false) if true the notifier will be called only when the active button changes. 
*/ 
function initActiveButtonWatcher(notifier, oneCallPerStateChange) { 

    // create variable to store button states. 
    var _activeButton = -1, activeButton = 0 

    // function to set the current active button. 
    function updateMouseState(e) { 

     // update active button. 
     activeButton = typeof e.buttons === "number" ? e.buttons : e.which 

     // notify if the active button is different. 
     if (oneCallPerStateChange? (_activeButton !== activeButton && typeof notifier === "function") : (typeof notifier === "function")) { 
      notifier(activeButton) 
     } 

     // store the last state in order to be able to tell if the state has changed. 
     _activeButton = activeButton 
    } 

    // function to get the current active button. 
    function getButtonState() { return activeButton } 

    // update the button state when the mouse is moved 
    // or an item is dragged into the window. 
    window.addEventListener("mousemove", updateMouseState, false) 
    window.addEventListener("dragover", function() { updateMouseState({which: 1}) }, false) 
    window.addEventListener("dragleave", function() { updateMouseState({which: 0}) }, false) 

    // expose the getter on the global object. 
    window.getButtonState = getButtonState 
} 

các giải pháp trên liên kết với các sự kiện mousemove và sự kiện kéo. Chrome nhận đối tượng sự kiện hợp lệ với các giá trị nút chính xác trong sự kiện kéo, tuy nhiên tôi thấy rằng FireFox không. Tôi tìm trạng thái của nút chuột trái khá rõ ràng trong quá trình kéo, nó sẽ là được nhấn, phải không? Bạn không thể kéo mà không cần nhấp và di chuyển. Vì vậy, tôi chỉ cần đặt trạng thái là 1 (trái xuống) khi di chuyển.Tương tự như vậy, trên dragleave, giá trị được đặt thành 0.

Bạn sẽ thực hiện tất cả thao tác kéo, kéo, kết thúc, thả, v.v. thông thường để ngăn các hành động trình duyệt mặc định và giá trị trả về bởi window.getButtonState() luôn là giá trị của nút chuột hiện đang hoạt động.

Dưới đây là một số cách sử dụng ví dụ mà đặt giá trị của thẻ h1 đầu tiên trong trang để nút hiện ép:

;(function() { 

    var active = document.getElementsByTagName("h1")[0] 

    function translate(n) { 
     switch (n) { 

      case 0: 
       return "none" 
       break; 
      case 1: 
       return "left" 
       break; 
      case 2: case 4: // Firefox calls it 4, the values differ between browsers I find. 
       return "middle" 
       break; 
      case 3: 
       return "right" 
     } 
    } 

    initActiveButtonWatcher(
     function(currentActive) { 
      active.innerHTML = "Active button: " + translate(currentActive) 
     } 
    ) 

})() 

Bạn sẽ phải làm một số trình duyệt tinh chỉnh chéo để xử lý các giá trị khác nhau (FF báo cáo 4 cho nút giữa, vv) nhưng bạn sẽ có thể nhận được nút hiện tại hợp lý tốt với phương pháp này.

Hãy thử nó ra: http://jsfiddle.net/6BUA4/

Answer 2

Có một biến với nhà nước: Demo - Code

var _isMouseDown = false; 

$(document).on("mousedown", function(event) { 
    _isMouseDown = true; 
}); 
$(document).on("mouseup", function(event) { 
    _isMouseDown = false; 
}); 

Sau đó, bạn có thể kiểm tra _isMouseDown để xem nếu chuột xuống.

Hoặc gọn hơn: Demo - Code

$(document).on("mousedown mouseup", function(event) { 
    _isMouseDown = event.type == "mousedown"; 
}); 

Nếu bạn không muốn biến toàn cầu bạn có thể lưu _isMouseDown ném data phương pháp của jQuery: Demo - Code

$(document).on("mousedown mouseup", function(event) { 
    $(this).data("_isMouseDown", (event.type == "mousedown")); 
}); 

Và kiểm tra ném: $(document).data("_isMouseDown")

---

Answer 3

Bạn đang tìm kiếm mới HTML5 kéo mạnh mẽ và thả http://www.w3schools.com/html/html5_draganddrop.asp

Sự kiện bạn đang tìm kiếm là "thả"

<div id="droppable" 
ondragover="event.preventDefault()" 
ondrop="event.preventDefault(); 
    console.log(event); 
    console.log(event.dataTransfer.getData('text/plain'))"> 

Tất nhiên bạn nên di chuyển mã này vào file js, nhưng điều này cho bạn ví dụ những gì đã được thực hiện. Bạn có thể muốn đọc nội dung bên trong mà thả bên ngoài, thậm chí sử dụng nó để tải lên.

Dưới đây là thông tin chi tiết về event.dataTransfer http://www.tutorialspoint.com/html5/html5_drag_drop.htm

Answer 4

Khi bạn chọn văn bản trong một chương trình bên ngoài (như Word) và kéo nó lên một trang web, các yếu tố trên trang này sẽ tạo dragenter sự kiện chuột. Tôi đã thử nghiệm điều này trong Chrome và nó đã làm việc cho tôi. Ví dụ, tôi có thể ràng buộc một người biết lắng nghe dragenter để document.body và nhận các sự kiện mặc dù có sự kiện nào chuột bình thường được bắn:

function logEvent(e) { 
    console.log(e); 
} 

document.body.addEventListener('dragenter', logEvent); 

// MouseEvent {dataTransfer: Clipboard, toElement: body, ..., button: 0, ...} 

lẽ bạn có thể sử dụng điều này để lợi thế của bạn, kể từ khi sự kiện dragenter có nghĩa là chuột đang kéo và nút phải được nhấn. Ngoài ra, bạn có thể nhận được các văn bản bị kéo bằng cách nhận dữ liệu từ sự kiện:

e.dataTransfer.getData('text/plain'); 

Bạn cần phải sử dụng các kiểu dữ liệu chính xác trong getData gọi. Tôi đã nhập một số văn bản vào Word và có thể lấy văn bản đã kéo đó bằng text/plain.