Récupérer l'ID d'un élément cliqué avec AddListener

Version imprimable

Bonjour (et bonne année),

Bon tout est dans le titre, comment puis-je récupérer l'ID d'un élément cliqué avec AddListener ?
Code:

1 2 3 4 5 6 7 8 AddListener(??, "click", function () { // récupérer les coordonnées var coordonnees = ??.getAttribute('coords').split(','); alert(coordonnees[0]+' - '+coordonnees[1]); });
Merci...

02/01/2013, 07h57
Bovino

Pour te répondre, il faudrait déjà savoir à quoi correspond AddListener()...
02/01/2013, 12h05
Golgotha

Bonjour,

Même si on ne connait pas vraiment la question, je tente une réponse à base de jQuery, sait on jamais... :aie:

:fleche: http://jsfiddle.net/EpmLj/

:pastaper:

ah yaya, autant pour moi, j'ai omis la fonction AddListener :

Code:

1
2
3
4
5
6
7
8
9
10
 
    function AddListener(element, event, f) {
        if(element.attachEvent) {
            element["e" + event + f] = f;
            element[event + f] = function () {
                element["e" + event + f](window.event)
            };
            element.attachEvent("on" + event, element[event + f])
        } else element.addEventListener(event, f, false)
    }

02/01/2013, 14h22
sekaijin

ben c'est simplement element.id
02/01/2013, 15h41
bigboomshakala

salut,

uh, je capte rien au IF (le ELSE ok)

merci pour les réponses

j'ai déjà essayé :
Code:

1 2 3 4 5 6 7 8 AddListener(element.id, "click", function () { // récupérer les coordonnées var coordonnees = element.id.getAttribute('coords').split(','); alert(coordonnees[0]+' - '+coordonnees[1]); });
firebug me dit que element n'est pas défini
normal ces fonctions sont incluses dans une fonction qui les regroupent...

pour info (désolé j'aurai du commencer par là), ces fonctions que j'essaye de modifier sont celles de SpryMap. J'ai besoin d'en étendre les fonctionnalités car ce script fonctionne très bien avec Canvas...

je comprends pas ce que tu fais
ta fonction est
Code:

1 2 3 4 5 6 7 8 9 function AddListener(element, event, f) { if(element.attachEvent) { element["e" + event + f] = f; element[event + f] = function () { element["e" + event + f](window.event) }; element.attachEvent("on" + event, element[event + f]) } else element.addEventListener(event, f, false) }
dans ce code l'id est element.id
reste à savoir ce que tu veux faire
déjà je ne vois pas l'utilité de tout ce bric à brac

ensuite on ne sais pas ce qu'est f je suppose que c'est une fonction mais définie comment ?

A+JYT

Bonsoir,
lu en diagonale mais

Code:

1
2
3
4
5
AddListener(element.id, "click", function () {
  // récupérer les coordonnées
   var coordonnees = this.getAttribute('coords').split(',');
   alert(coordonnees[0]+' - '+coordonnees[1]);
});

ne convient pas ?

reste à savoir ce que représente element.id

Non déjà essayé.
Voici le script, pour une vision plus globale, j'ai retiré quelques fonctions pour alléger le bazar...

Code:

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
 
/*******************************************************************************
  
Usage:
 
var map = new CanvasMap({
   // The ID of the element being transformed into a map
   id : "",
   // The width of the map (in px)
   width: 800,
   // The height of the map (in px)
   height: 800,
   // The X value of the starting map position
   startX: 0,
   // The Y value of the starting map position
   startY: 0,
   // Boolean true if the map should animate to a stop
   scrolling: true,
   // The time (in ms) that the above scrolling lasts
   scrollTime: 300,
   // Boolean true if the map disallows moving past its edges
   lockEdges: true,
   // The CSS class attached to the wrapping map div
   cssClass: ""
});
 
*******************************************************************************/
 
function CanvasMap(param) {
 
(...)
 
    /***************************************************************************
     * Name : AddListener()
     * Description (EN) : Adds an event listener to the specified element.
     * Description (FR) : Ajoute un suivi d'événement à un élément spécifique.      
     * Parameters (EN) : element - The element for which the listener is being added
     *                   event - The event for which the listener is being added
     *                   f - The function being called each time that the event occurs
     * Parameters (FR) : element - L'élément pour lequel un suivi est ajouté
     *                   event - L'événement pour lequel un suivi est ajouté
     *                   f - La fonction appelée chaque fois que l'événement se produit                  
     **************************************************************************/
 
    function AddListener(element, event, f) {
        if(element.attachEvent) {
            element["e" + event + f] = f;
            element[event + f] = function () {
                element["e" + event + f](window.event)
            };
            element.attachEvent("on" + event, element[event + f])
        } else element.addEventListener(event, f, false)
    }
 
(...)
 
    var m = this;
    m.map = document.getElementById(param.id); // 
    m.width = typeof param.width == "undefined" ? 800 : param.width;
    m.height = typeof param.height == "undefined" ? 800 : param.height;
    m.scrolling = typeof param.scrolling == "undefined" ? true : param.scrolling;
    m.scrollTime = typeof param.scrollTime == "undefined" ? 300 : param.scrollTime;
    m.lockEdges = typeof param.lockEdges == "undefined" ? true : param.lockEdges;
    m.viewingBox = document.createElement("div");
    if(typeof param.cssClass != "undefined") m.viewingBox.className = param.cssClass;
    m.mousePosition = new Coordinate;
    m.mouseLocations = [];
    m.velocity = new Coordinate;
    m.mouseOver = true; // ajoute le curseur dndUp
    m.mouseDown = false;
    m.timerId = -1;
    m.timerCount = 0;
    m.map.parentNode.replaceChild(m.viewingBox, m.map);
    m.viewingBox.appendChild(m.map);
    m.viewingBox.style.overflow = "hidden";
    m.viewingBox.style.width = m.width + "px";
    m.viewingBox.style.height = m.height + "px";
    m.viewingBox.style.position = "relative";
    m.map.style.position = "absolute";
    MoveMap(typeof param.startX == "undefined" ? 0 : -param.startX, typeof param.startY == "undefined" ? 0 : -param.startY);
 
(...)
 
    /***************************************************************************
     * click event handler / gestionnaire d'événement click
     **************************************************************************/
 
    AddListener(element.id, "click", function () {
        // récupérer les coordonnées
 
        var coordonnees = this.getAttribute('coords').split(',');
 
        alert(coordonnees[0]+' - '+coordonnees[1]);
    });
 
};

04/01/2013, 13h45
sekaijin

encore une fois que veux tu faire
car ton code est abracadabrant (tu définis une fonction qui prend un élément en argument et tu l'appelle en lui passant un id ça n'a pas de sens)
on peux dire tout ce que tu veux on ne sais pas quel est le problème donc on ne peux pas t'aider.

A+JYT
04/01/2013, 15h56
Bovino

Code:

m.map = document.getElementById(param.id);

C'est assez amusant comme instruction... :no:
04/01/2013, 17h19
NoSmoking
Citation:

Envoyé par Bovino

Code:

m.map = document.getElementById(param.id);

C'est assez amusant comme instruction... :no:

il a l'oeil (*) le bougre :mrgreen:

Vu ton contexte je ferais un simple
Code:

1 2 3 AddListener(m.map, "click", function(){ console.log( 'x: ', m.mousePosition.x , ',y: ', m.mousePosition.y); });
(*)Oeil de boeuf bien sûr
07/01/2013, 20h37
kryogen

Non mais je vous ai dit que je modifiais un script existant :cry:
Mais je me suis débrouillé autrement, ce n'est pas heureux mais cela fonctionne.
En gros pour cette fonction - dont vous pouvez voir la démo ici - :

http://candrews.net/sandbox/spryMap/

Il me manquait deux choses :
- pouvoir faire un zoom "réel" avec canvas
- pouvoir en cliquant sur un lien chercher des coordonnées ou centrer le bazard.

Et c'est maintenant chose faite...

Merci tout de même, je m'y suis mal pris :aie:

Banzaï !