Html image cliquable avec maintient appuyé sous naviguateur andoid

**carlita_84** · 21/08/2024, 13h58

Bonjour, je suis en train de developper un code html qui dois être visible depuis un naviguateur android.

J'ai un problème, car lorsque je clique sur mon bouton longtemps android affiche un message, sa ne se produit pas sous un naviguateur comme firefox sous windows.

Comment eviter que sous andoid cette fenetre s'affiche, voir photo.

Il s'agit de fleches pour diriger un robot, et donc il faut pouvoir maintenir le clic sur le bouton.

Je suppose qu'il dois exister une balise spéciale.

Nom : Screenshot_20240821_135528_Firefox.jpg
Affichages : 80
Taille : 321,1 Ko

Nom : Screenshot_20240821_135528_Firefox.jpg
Affichages : 80
Taille : 321,1 Ko

**NoSmoking** · 21/08/2024, 19h11

Bonjour,

Comment eviter que sous andoid cette fenetre s'affiche, voir photo.

c'est le contexte menu qui s'affiche sur les supports tactiles.

Pour éviter cela regarde du côté de la propriété CSS touch-action.

**carlita_84** · 21/08/2024, 20h30

J'ai essayé ceci: touch-action: none;

sa ne change rien sur android, toujours le menu qui s'affiche.

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
            font-family: Arial, sans-serif;
        }
        #video {
            width: 640px;
            height: 480px;
            border: 1px solid #000;
        }
        .button-container {
            margin-top: 20px;
        }
        button {
            border: none;
            background: transparent;
			touch-action: none;
        }
        button img {
            width: 100px; /* Ajustez la taille selon vos besoins */
            height: 50px; /* Ajustez la taille selon vos besoins */
            touch-action: none;
        }
        button:focus {
            outline: none; /* Évitez les bordures de focus par défaut */
        }

**Doksuri** · Hier, 09h30

t'as essaye de disable le contextMenu en JS sur ton element ? un appluis long sur ecran tactil correspond au clique-droit sur une souris.

**carlita_84** · Hier, 10h41

Je viens d'essayer en ajoutant ceci à la place de ma balise <body>: <body oncontextmenu="return false;">

Malheureusement maintenant le clic long n'est plus détecté.

Voici mon code complet que j'utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Feed</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #video {
            width: 640px;
            height: 480px;
            border: 1px solid #000;
        }
        .button-container {
            margin-top: 20px;
        }
        button {
            border: none;
            background: transparent;

        }
        button img {
            width: 100px; /* Ajustez la taille selon vos besoins */
            height: 50px; /* Ajustez la taille selon vos besoins */
            touch-action: none;
        }
        button:focus {
            outline: none; /* Évitez les bordures de focus par défaut */
        }
    </style>
</head>
<body oncontextmenu="return false;">
    <h1>Video Feed</h1>
    <img id="video" src="{{ url_for('video_feed') }}" alt="Video Feed">
    <div class="button-container">
        <button id="advance-button">
            <img src="static/advance.png" alt="Avancer">
        </button>
        <button id="reverse-button">
            <img src="static/reverse.png" alt="Reculer">
        </button>
        <button id="right-button">
            <img src="static/right.png" alt="Droite">
        </button>
        <button id="left-button">
            <img src="static/left.png" alt="Gauche">
        </button>
        <button id="home-button">
            <img src="static/home.png" alt="Retour Home">
        </button>
    </div>

    <script>
        let intervalId;

        function sendAction(action) {
            fetch('/action', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ action: action })
            })
            .then(response => response.json())
            .then(data => {
                console.log(data.message);
            })
            .catch(error => console.error('Error:', error));
        }

        function startAction(action) {
            intervalId = setInterval(() => sendAction(action), 100);
        }

        function stopAction() {
            clearInterval(intervalId);
        }

        document.getElementById('advance-button').addEventListener('mousedown', () => startAction('advance'));
        document.getElementById('reverse-button').addEventListener('mousedown', () => startAction('reverse'));
        document.getElementById('right-button').addEventListener('mousedown', () => startAction('right'));
        document.getElementById('left-button').addEventListener('mousedown', () => startAction('left'));
        document.getElementById('home-button').addEventListener('click', () => sendAction('home'));

        document.getElementById('advance-button').addEventListener('mouseup', stopAction);
        document.getElementById('reverse-button').addEventListener('mouseup', stopAction);
        document.getElementById('right-button').addEventListener('mouseup', stopAction);
        document.getElementById('left-button').addEventListener('mouseup', stopAction);
        document.getElementById('advance-button').addEventListener('mouseleave', stopAction);
        document.getElementById('reverse-button').addEventListener('mouseleave', stopAction);
        document.getElementById('right-button').addEventListener('mouseleave', stopAction);
        document.getElementById('left-button').addEventListener('mouseleave', stopAction);
    </script>
</body>
</html>

**Doksuri** · Hier, 11h23

Envoyé par carlita_84

Malheureusement maintenant le clic long n'est plus détecté.

ce n'etait pas ca ton probleme ? ne pas afficher le context menu lors d'un clique long ?

**mathieu** · Hier, 11h31

Envoyé par Doksuri

ce n'etait pas ca ton probleme ? ne pas afficher le context menu lors d'un clique long ?

son but est de détecter le clic long sur les images pour faire une action en javascript.

Envoyé par carlita_84

Je viens d'essayer en ajoutant ceci à la place de ma balise <body>: <body oncontextmenu="return false;">

essayez en laissant cela et en mettant button {touch-action : none;} dans le code css

**carlita_84** · Hier, 13h01

Je viens de tester avec touch-action: none; , le menu contextuel ne s'affiche plus sous android naviguateur mais le clic long n'est plus détecté, par contre sa marche toujours sous windows.

Je pense qu'il dois y avoir une astuce, mais laquelle?

En fait j'ai crée des touches qui permettent de déplacer un robot lorsqu'on maintient appuyé. Et j'aimerais que sa marche sous android...

**carlita_84** · Hier, 14h00

je crois avoir trouvé grace a chat gpt que j'ai interrogé.

Il faut utiliser touchstart et touchend a la place de mousedown et mouseup.

Sa fonctionne sous android.

J'ai auparavent desactivé le menu contextuel avec ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

Je l'utilise donc comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        document.getElementById('advance-button').addEventListener('touchstart', () => startAction('advance'));
        document.getElementById('advance-button').addEventListener('touchend', stopAction);

Par contre, si je change sa ne marche plus sur naviguateur windows, et t'il possible de charger une partis du code javascript suivant le naviguateur utilisé (andoid ou windows)

**Doksuri** · Hier, 14h13

utilise plutot les events pointer* plutot que touch*

pointerdown & pointerup

developer.mozilla.org/fr/docs/Web/API/PointerEvent

Un pointeur est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile)

**carlita_84** · Hier, 21h09

Merci à vous , tout fonctionne parfaitement sur android et sur windows

Html image cliquable avec maintient appuyé sous naviguateur andoid

Discussions similaires

Partager

Partager