detectando el estado actual de un mouse en javascript o jquery, es decir, abajo o arriba

Question

Estoy construyendo una aplicación web que implica mucho arrastre y caída de texto desde la página web y desde otras aplicaciones, por ejemplo, documentos word y pdf. Necesito obtener el estado actual del mouse si está abajo (clic) o hacia arriba (liberación). Actualmente puedo obtener el estado actual del mouse si estoy arrastrando texto dentro de la página web pero no puedo obtener el estado del mouse si el mouse proviene de otra aplicación decir word y arrastrar texto. Cualquier puntero para obtener el estado hacia abajo o hacia arriba del mouse es muy apreciado.

Answer 1

La cuestión tal como lo entiendo es que se necesita para determinar si se pulsa el botón izquierdo del ratón, si se pulsa fuera de la ventana (para una operación de arrastrar)

Hay una serie de cuestiones:

• no hay eventos mousemove disparadas durante una operación de arrastrar
• de datos de estados de botón actual difiere entre los navegadores

me he encontrado con esta solución:

/** 
* 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 
} 

La solución anterior se une al mousemove event y el evento dragover. Chrome obtiene un objeto de evento válido con los valores de botón correctos en el evento de dragover; sin embargo, descubrí que Firefox no lo hizo. Me imagino que el estado del botón izquierdo del mouse es bastante obvio durante una operación de arrastre, va a ser presionado, ¿verdad? No puedes arrastrar sin hacer clic y mover. Así que simplemente establecí el estado en 1 (abajo) en dragover.Del mismo modo, en dragleave, el valor se establece en cero.

Haría todo el manejo normal de dragover, dragstart, end, drop, etc. para evitar las acciones predeterminadas del navegador y el valor devuelto por window.getButtonState() debería ser siempre el valor del botón del mouse actualmente activo.

He aquí algunos ejemplo de uso que establece el valor de la primera etiqueta h1 en la página al botón actualmente presionado:

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

})() 

Vas a tener que hacer algunos navegadores cruzados ajustes para el manejo de los diferentes valores (FF reportó 4 para el botón del medio, etc.) pero usted debería poder obtener el botón actual razonablemente bien con este método.

Pruébelo: http://jsfiddle.net/6BUA4/

Answer 2

tener una variable con el estado: Demo - Code

var _isMouseDown = false; 

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

entonces usted puede comprobar para ver si _isMouseDown ratón está presionado.

O más compacta: Demo - Code

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

Si no desea que las variables globales que se pueden guardar _isMouseDown tiro data método de jQuery: Demo - Code

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

y comprobar tiro: $(document).data("_isMouseDown")

---

Answer 3

Usted está buscando un nuevo robusta de arrastrar y soltar de HTML5 http://www.w3schools.com/html/html5_draganddrop.asp

El evento que está buscando es "soltar"

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

Por supuesto debe mover este código en el archivo js, ​​pero esto te da un ejemplo de lo que se ha hecho. Es posible que desee leer lo que hay dentro de esa caída externa, incluso usarlo para cargas.

Aquí es información detallada sobre event.dataTransfer http://www.tutorialspoint.com/html5/html5_drag_drop.htm

Answer 4

Al seleccionar texto en un programa externo (como Word) y se arrastra en una página web, elementos de la página generará dragenter Los eventos de ratón. Probé esto en Chrome y funcionó para mí. Por ejemplo, yo puedo enlazar un oyente dragenter a document.body y recibir los eventos a pesar de que no hay eventos de ratón normal se disparan:

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

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

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

tal vez usted puede usar esto para su ventaja, ya que el evento dragenter significa que el ratón está arrastrando y que el botón debe ser presionado. Además, se puede obtener el texto que está siendo arrastrado por conseguir los datos del suceso:

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

Es necesario utilizar el tipo de datos correcto en la llamada getData. Escribí texto en Word y pude obtener ese texto arrastrado con text/plain.