2011-06-11 17 views
6

Uso los eventos Raphael .mouseover() y .mouseout() para resaltar algunos elementos en mi SVG. Esto funciona bien, pero después de hacer clic en un elemento, quiero que deje de resaltar.Raphael JS: cómo eliminar eventos?

En el Raphael documentation que encontré:

para desenlazar eventos utilizan los mismos nombres de los métodos con el prefijo “un”, es decir element.unclick (f);

pero no puedo hacer que funcione y tampoco entiendo el parámetro 'f'.

Esto no funciona, pero ¿qué hace?

obj.click(function() { 
    this.unmouseover(); 
}); 
+0

Con 40 preguntas, espero más del 57% de ellos tenían respuestas apropiadas que podrían ser marcados como correcta. :) –

+2

No, la documentación dice que puedes usar 'un' para Desvincular esos eventos ... pero no funciona, o estoy haciendo algo mal ... Revisaré mis preguntas nuevamente para seleccionar buenas respuestas, pero la mayoría de ellos aún no han recibido una respuesta completa, creo ... – Dylan

+0

Si tiene muchas preguntas que tienen respuestas, pero ninguna de ellas es "correcta", entonces podría reconsiderar cómo hace las preguntas, si son claro y conciso, y si están demasiado localizados para ser respondidos con éxito. :) –

Respuesta

5

Ok, lo que tiene que hacer es pasar a la función de controlador a la solicitud unmouseover:

// Creates canvas 320 × 200 at 10, 50 
var paper = Raphael(10, 50, 320, 200); 
// Creates circle at x = 50, y = 40, with radius 10 
var circle = paper.circle(50, 40, 10); 
// Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill", "#f00"); 
// Sets the stroke attribute of the circle to white 
circle.attr("stroke", "#fff"); 

var mouseover = function (event) { 
    this.attr({fill: "yellow"}); 
} 
var mouseout = function (event) { 
    this.attr({fill: "red"}); 
} 

circle.hover(mouseover, mouseout); 
circle.click(function (event) { 
    this.attr({fill: "blue"}); 
    this.unmouseover(mouseover); 
    this.unmouseout(mouseout); 
}); 

http://jsfiddle.net/GexHj/1/

Eso es lo que se trata de f. También puede utilizar unhover():

circle.click(function (event) { 
    this.attr({fill: "blue"}); 
    this.unhover(mouseover, mouseout); 
}); 

http://jsfiddle.net/GexHj/2/

+0

Genial, muchas gracias! Incluso lo hizo funcionar ahora con una matriz de objetos, donde utilizo el evento mouseout como una 'propiedad' de cada objeto ... – Dylan

+0

Pregunta sobre esta vieja respuesta: llamando a "this.unmouseout (mouseout);" parece depender del nombre de la función que originalmente vinculó a "mouseout", ¿verdad? Así que podría haber llamado a la función "myFunc" y la desvincularía con "unmyFunc", ¿verdad? Pero eso parece horrible para cualquier minificación de código, ¿no? No hay garantía de que si "myFunc" se reduce al mínimo a "xy", "unmyFunc" se reducirá al mínimo a "unxy". ¿Me estoy perdiendo de algo? –

+0

'mouseout' es en realidad una referencia a la función, no un valor de cadena. En teoría, como pasar una función por referencia es parte del comportamiento normal en Javascript, una minificación agresiva debería identificar y reemplazar la referencia de función así como la declaración de la etiqueta de identificador de función. Mi respuesta sin ninguna prueba, no deberías tener un problema.Si encuentra una prueba específica con un minificador específico, hágamelo saber. –

Cuestiones relacionadas