Discussion :

[membreV]

Bonjour,
J'essaye de faire en sorte que quand je clique sur un objet (donc dans mon cas c'est sur un trait qui joue le role d'un mur) il reste dans la couleur #FF0000.
J'ai réussie à faire fonctionner hover (donc quand je survole l'élément il apparait bien en couleur #008cba) mais pas click.

Code JavaScript :

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
 
var wallColorHover = "#008cba";
var wallColorClicked = "#FF0000"; 
 
FloorplannerView.prototype.drawWall = function (wall) {
                var hover = (wall === this.viewmodel.activeWall);
                var click = (wall === this.viewmodel.activeWall);
                var color = wallColor;
                if (hover && this.viewmodel.mode == Floorplanner.floorplannerModes.DELETE) {
                    color = deleteColor;
                }
                else if (hover) {
                    color = wallColorHover;
                }
                else if (click) {
                    color = wallColorClicked;
                }
                this.drawLine(this.viewmodel.convertX(wall.getStartX()), this.viewmodel.convertY(wall.getStartY()), this.viewmodel.convertX(wall.getEndX()), this.viewmodel.convertY(wall.getEndY()), hover ? wallWidthHover : wallWidth, color, click ? wallWidth : wallWidth, color);
                if (!hover && wall.frontEdge) {
                    this.drawEdge(wall.frontEdge, hover);
                }
                if (!hover && wall.backEdge) {
                    this.drawEdge(wall.backEdge, hover);
                }
                if (!click && wall.frontEdge) {
                    this.drawEdge(wall.frontEdge, click);
                }
                if (!click && wall.backEdge) {
                    this.drawEdge(wall.backEdge, click);
                }
            };
 
FloorplannerView.prototype.drawTarget = function (x, y, lastNode) {
                this.drawCircle(this.viewmodel.convertX(x), this.viewmodel.convertY(y), cornerRadiusHover, cornerColorHover);
                if (this.viewmodel.lastNode) {
                    this.drawLine(this.viewmodel.convertX(lastNode.x), this.viewmodel.convertY(lastNode.y), this.viewmodel.convertX(x), this.viewmodel.convertY(y), wallWidthHover, wallColorHover, wallColorClicked);
                }
            };

[NoSmoking]

Bonjour,
• quelle bibliothèque utilises-tu ?
• comment gères-tu les événements hover et click?
• pourquoi les affectations sur ces lignes sont identiques ?

Code :

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

1
2
var hover = (wall === this.viewmodel.activeWall);
var click = (wall === this.viewmodel.activeWall);

... dans ce cas click est égal à hover !?!

[membreV]

quelle bibliothèque utilises-tu ?
J'utilise jQuery

Code javascript :

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
jQuery.fn.extend({
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	},
 
	bind: function( types, data, fn ) {
		return this.on( types, null, data, fn );
	},
	unbind: function( types, fn ) {
		return this.off( types, null, fn );
	},
 
	delegate: function( selector, types, data, fn ) {
		return this.on( types, selector, data, fn );
	},
	undelegate: function( selector, types, fn ) {
		// ( namespace ) or ( selector, types [, fn] )
		return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
	}
});

J'utilise également Bootstrap.

Merci de votre réponse !

[NoSmoking]

Tu n'as pas vraiment répondu à mes questionnements, mais bon !

Il existe une hiérarchie dans les événements de la souris, « hover » apparaitra toujours avant un « click », de plus le « click » est éphémère et le « hover » existera même lors du « click ».

Il est tout à fait possible de parer à tout ceci en passant par l'ajout/retrait d'un flag ou l'ajout/retrait d'une classe CSS.

Petit exemple simple d'une façon de gérer cela :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color click and over</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2125790">
<style>
.cadre {--ep: 1em;--long: 20em;position: relative;width: var(--long);height: var(--long);margin: auto;background-color: #F5F5F5;cursor: pointer;}
.mur-v, .mur-h {position: absolute;top: 0;left: 0;background-color: #AAA;}
.mur-v {width: var(--ep);height: calc(var(--long) - var(--ep));}
.mur-h {width: calc(var(--long) - var(--ep));height: var(--ep);}
.right {right: 0;left: auto;}
.bottom {top: auto;bottom: 0;left: var(--ep);}
.left {top: var(--ep);}
.mouseover {background-color: #08B;}
.clicked {background-color: #F00;}
</style>
</head>
<body>
<div class="cadre">
  <div class="mur-h top"></div>
  <div class="mur-v right"></div>
  <div class="mur-h bottom"></div>
  <div class="mur-v left"></div>
</div>
<script>
const murs = document.querySelectorAll(".cadre div");
function handleMur(e) {
  const el = e.target;
  let className;
  switch (e.type) {
    case "click":
      className = "clicked";
      break;
    case "mouseenter":
    case "mouseleave":
      className = "mouseover";
      break;
  }
  className && el.classList.toggle(className);
}
const events = ["click", "mouseenter", "mouseleave"];
murs.forEach((el) => {
  events.forEach((ev) => {
    el.addEventListener(ev, handleMur);
  });
});
</script>
</body>
</html>

tu noteras que l'ordre de déclaration des classes CSS mouseover et clicked n'est pas anodin.

A voir si tu peux transposer cela à ton contexte.