Событие Onclick для прямого использования Raphaeljs

Ответ 1

Создайте набор для всех элементов в кнопке. Затем добавьте обработчик клика (или мыши) в группу. Обратите внимание, что прямоугольники должны иметь заливку, иначе они не будут получать события мыши. Для прозрачной кнопки используйте непрозрачность 0.

var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var COLOR_NORMAL = 'blue';
var COLOR_HOVER = 'red';
var background = paper.rect(10, 10, 50, 50,10).attr({
    fill: COLOR_NORMAL
});
var label = paper.text(35, 35, "Hello");

group.push(background);
group.push(label);

group.attr({
    cursor: 'pointer',
}).mouseover(function(e) {
    background.attr('fill', COLOR_HOVER);
}).mouseout(function(e) {
    background.attr('fill', COLOR_NORMAL);
}).mouseup(function(e) {
    alert("clicked");
}); 

Ответ 2

Вот два способа сделать это. В обоих случаях я просто добавляю onclick для текста. Другими словами, у них одинаковый onclick для прямоугольника и для текста.

1) Просто добавьте эту строку в конец

group[group.length - 1].node.onclick = function () { c2.attr("fill", "red");};

2) Или вы можете создать другую переменную c3, например c2, и прикрепить onclick тем же самым способом. Вот как выглядит весь ваш код.

var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var c1 = paper.path("M35 60 L35 90");
var c2 = paper.rect(10, 10, 50, 50,10);
var c3 = paper.text(35, 35, "Hello").attr({"font-size":36});
group.push(c2);
group.push(c3);

c2.attr("fill", "blue");
c2.node.onclick = function () { c2.attr("fill", "red");}; 
c3.node.onclick = function () { c2.attr("fill", "red");};

Я сделал текст действительно большим здесь, чтобы вы могли быть уверены, что нажимаете на текст, а не на прямоугольник.

Ответ 3

Приятно на самом деле предоставить 3-слойный объект, потому что вы можете покрасить задний слой, как вам нравится. Передний слой имеет ту же форму, что и ваш задний слой, но имеет непрозрачность нуля, чтобы вы могли видеть текст на среднем слое. Я также не люблю использовать node для обработки событий, но изначально доступен механизм обработки событий Рафаэля. Нижеприведенный пример взят из одного из примеров моего веб-сайта, я сократил его еще больше, чтобы его было легче понять. Также обратите внимание, что это кнопка, состоящая из кружка переднего и заднего слоев с текстом, зажатым между двумя слоями. Они также могут быть прямоугольниками/закругленными прямоугольниками. Функциональность включает в себя инвертирование цветов при наведении курсора мыши/мыши...

button = function (paper, xpos, ypos, r, labeltext) 
{

this.backLayer = paper.circle(xpos, ypos, r).attr({ fill: "#FFFF00", 'fill-opacity': 0  , stroke: "#FF0000",'stroke-width':5, 'stroke-opacity':0});

/*The text automatically centres itself as this is the default text positioning for Raphael text*/
this.label = paper.text(xpos, ypos, labeltext).attr({fill:'#ff0000', 'font-size':18});

/*Now we make a copy for the front layer and we also make the back layer opaque. So that you can see it yellow fill*/
this.frontLayer = this.backLayer.clone();
this.backLayer.attr({'fill-opacity': 1, 'stroke-opacity':1});

/*Now make the back layer and the text referencable for the mouseover, mouseout and click event of the front layer*/ 
this.frontLayer.backLayer= this.backLayer;
this.frontLayer.label = this.label;

/*Add a preferred cursor by referencing the underlying DOM object of the frontLayer*/
this.frontLayer.node.style.cursor = 'pointer';

/*Now you can interact with the lower layers behind the invisible covering layer ( frontLayer ) in it event methods*/
this.frontLayer.mouseover(
function (e) {
    this.backLayer.animate({ fill: "#FF0000", stroke: "#FFFF00" }, 1000);
    this.label.animate({ fill: "#FFFF00" }, 1000);
    }
);  
this.frontLayer.mouseout(
function (e) {
    this.backLayer.animate({ fill: "#FFFF00", stroke: "#FF0000" }, 1000);
    this.label.animate({ fill: "#FF0000" }, 1000);
    }
);
this.frontLayer.click(      
function (e) {
        alert("Creating loads of custom buttons is easy\n\nYou made this one with the following specification:\n"+
        "Button Text      : "+this.label.attr("text")+"\n"+
        "Button Centre @ X: "+this.backLayer.attr("cx")+"\n"+
        "Button Centre @ Y: "+this.backLayer.attr("cy")+"\n"+
        "Button Radius    : "+this.backLayer.attr("r"));
    }

);  
}
/*Create the button*/
rappyButton = new button(paper, 250, 200, 75, "Raphael");

Надеюсь, что это помогло.

Ответ 4

Как использовать один и тот же обработчик для текста и rect, используя fill-opacity of 0?

Ответ 5

Вы использовали свойство set Рафаэля (http://raphaeljs.com/reference.html#set). Вы пробовали добавить onclick к этому?

group.click(function(event) {
    c2.attr({fill: "red"});
});

Ответ 6

onmousedown работал у меня в IE 7,8 и 9

            st[0].onclick = function () {
                myFunc(dataObj);
                st.toFront();
                R.safari();
            };
            st[0].onmousedown = function () {
                myFunc(dataObj);
                st.toFront();
                R.safari();
            };

Я также пробовал некоторые другие методы, абстрагируя функцию до переменной, но она не работала. В моем случае я не могу добавить прямоугольник к дисплею, и люди нажимают на него, это было плохое решение по нескольким причинам.

Надеюсь, это поможет!

Ответ 7

Рассмотрим просто игнорирование событий указателей на текстовых узлах и их передачу через родительский прямоугольник.

svg text {
    pointer-events: none;
}