Pergunta

Duplicate possíveis:
Raphaeljs e Internet Explorer, problema ao clicar em um elemento

Eu estou tentando encontrar uma maneira para acionar um evento quando um rato cliques em algum texto gerado a partir de Raphael JS. No Firefox, o evento clique funciona perfeitamente, no IE 7 e 8 (eu não testei versões anteriores) nem clique nem trabalham mousedown. Clique fina funciona para outros objetos raphael, por exemplo, o rectângulo no exemplo.

Como posso acionar um evento sobre o texto dado na demonstração abaixo:

<html>
    <head>
        <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>

    <div id="graph"></div>

    <script language="javascript">
        function setupImage() {
            var canvas = Raphael(graph, 200, 200);

            var alpha = canvas.text(100, 10, "Two Words");
            alpha.attr("font-size", "20px");

            var beta = canvas.rect(50, 50, 50, 50);
            beta.attr("fill", "#3333cc");

            canvas.safari();

            var textClickEvent = function(event) {
                alert("text clicked");
            };

            var boxClickEvent = function(event) {
                alert("box clicked");
            }; 

            $(alpha.node).click(textClickEvent);
            $(beta.node).click(boxClickEvent);
        }

        $(window).load(setupImage);
    </script>

    </body>
</html>

Minha intuição é que eu pode ter que tentar manipular o DOM para quebrar o texto em, por exemplo, um elemento A e se ligam em que, em vez. Isso não parece ser a solução mais limpa então eu estou pedindo aqui para ver se alguém tem uma abordagem alternativa.

Foi útil?

Solução

Por que não usar o raphael construído em caso de codificação assim:

alpha.node.onclick = textClickEvent;
beta.node.onclick = boxClickEvent;

ou você também pode fazer isso:

alpha.click(textClickEvent);
beta.click(boxClickEvent);

O resto do seu código está bem.

Alguns links úteis: seção eventos Raphael e Raphael seção nó .

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top