Código de JavaScript - Objeto Mouse

Imágen de perfil
Val: 605
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Objeto Mousegráfica de visualizaciones


JavaScript

Publicado el 30 de Agosto del 2018 por Humberto (35 códigos)
1.192 visualizaciones desde el 30 de Agosto del 2018
este script ayuda a saber datos del mouse como:
posiciones X y Y del mouse
si el mouse ha sido presionado
si el mouse esta enfocado en un objeto de la ventana seleccionado por id

Estas funciones son útiles para crear videojuegos como los que he creado en canvas
Captura-de-pantalla-285

Requerimientos

navegador de internet actualizado
google chrome

1.0
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 30 de Agosto del 2018gráfica de visualizaciones de la versión: 1.0
1.193 visualizaciones desde el 30 de Agosto del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

En esta versión tiene todo lo de la primera versión más
detectar foco en objetos que se declaren con
mouse.focus(objeto)
se inicializa el objeto con:
mouse.iniciar();

Se puede desactivar el menú contextual al dar click derecho sobre un objeto seleccionado por
mouse.contextual(window,false)
en este caso pusimos de objeto a window y el false indica que desactiva el menú contextual, esto se puede revertir poniendo el objeto y la opción true
mouse.contextual(window,true)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Objeto mouse posicion</title>
</head>
<body>
        <canvas id="lienzo" style="border:1px solid #000"></canvas>
    <script>
    var canvas = document.getElementById("lienzo");
    var mouse = {
        x: null,
        y: null,
        press1: null,
        press2: null,
        press3: null,
        focus: null,
        scrollX: null,
        scrollY: null,
        iniciar(){
            mouse.move();
            mouse.up();
            mouse.down();
        },
        move(){
            window.addEventListener("mousemove",function(event){
                mouse.x = event.clientX;
                mouse.y = event.clientY;
                //console.log("Coordenadas X: " + mouse.x + " Coordenadas Y: " + mouse.y)
            },false);
        },
        down(){
            window.addEventListener("mousedown",function(event){
                // Si el mouse esta presionado
                mouse.press1 = (event.which==1)? true: false;
                mouse.press2 = (event.which==2)? true: false;
                mouse.press3 = (event.which==3)? true: false;
 
                if(event.which == 1){
                    console.log("Tiene presionado el boton pricipal : " + mouse.press1 )
                }
                if(event.which == 2){
                    console.log("Tiene presionado el boton de enmedio de el scroll: " + mouse.press2)
                }
                if(event.which == 3){
                    console.log("Tiene presionado el boton secundario: " + mouse.press3)
                }
            },false)
        },
        up(){
            window.addEventListener("mouseup",function(event){
                // Si el mouse estaba presionado y lo soltaste
                mouse.press1 = (event.which == 1)? false: true;
                mouse.press2 = (event.which == 2)? false: true;
                mouse.press3 = (event.which == 3)? false: true;
 
                if(event.which == 1){
                    console.log("Acaba de soltar el boton pricipal : " + mouse.press1 )
                }
                if(event.which == 2){
                    console.log("Acaba de soltar el boton de enmedio de el scroll: " + mouse.press2)
                }
                if(event.which == 3){
                    console.log("Acaba de soltar el boton secundario: " + mouse.press3)
                }
            },false)
        },
        focus(objeto){
            objeto.addEventListener("mouseover",function(){
                // Si el mouse esta sobre un objeto seleccionado por id en este caso el canvas
                mouse.focus = true;
                //console.log("Foco: " + mouse.focus + " En: " + objeto)
            },false);
            objeto.addEventListener("mouseout",function(){
                // Si el mouse sale de un objeto enfocado y seleccionado por id anteriormente
                mouse.focus = false;
                //console.log("Foco: " + mouse.focus + " desenfocado de: " + objeto)
            },false);
        },
        contextual(objeto,opcion){
            objeto.oncontextmenu = function() {
                return opcion;
                //Objeto Es para poner un objeto en el que no se permite el menu conntextual
                //La opcion permite decir si activar o no
                //Si la opcion esta en true se permitira el menu contextual
                //Si la opcion esta en falsa se desactivara el menu contextual
            }
        },
        wheel(){
            window.addEventListener("wheel",function(){
                mouse.scroll = true;
            },false)
        },
        scroll(objeto1,objeto2){
            objeto1.addEventListener("scroll",function(){
                mouse.scrollX = objeto1.pageXOffset;
                mouse.scrollY = objeto1.pageYOffset;
            },false);
        }
    };
    mouse.iniciar();
    mouse.focus(canvas)
    mouse.contextual(canvas,false)
    mouse.scroll(window)
    </script>
</body>
</html>



Comentarios sobre la versión: 1.0 (1)

Imágen de perfil
28 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4784