javascript - Mouse events not fired after applying CSS -

i'm working on app uses svg draw nodes (i.e. rectangles) have ports (i.e. circles) , edges (i.e. path) between 2 ports.

i'm attaching mouseup, mouseenter , mouseleave callback ports in order draw edges. these events triggered when add following style mouseup never called , mouseenter not called @ when entering delayed cannot draw edge!

.graph path {   fill: none; } .graph .edge-bg {   stroke: #000;   stroke-width: 5px; } .graph .edge-fg {   stroke: #fff;   stroke-width: 3px;   transition-property: stroke-width;   transition-duration: 0.5s; } 

here port react component:

// react element representing node port     var port = react.createclass({displayname: "port", componentdidmount: function () {     if(this.props.inport) {         // if inport listen mouse event         this.getdomnode().addeventlistener("mouseenter", this.onmouseenter);         this.getdomnode().addeventlistener("mouseleave", this.onmouseleave);         this.getdomnode().addeventlistener("mouseup", this.onmouseup);     }else {          // if outport listen mouse down event         this.getdomnode().addeventlistener("mousedown", this.onmousedown);     } }, // handle mouse down event on port onmousedown: function(event) {     event.preventdefault();     emitter.emit('mouse_down', this.payload()); }, onmouseenter: function(event) {     console.log("mouseenter on port"); }, onmouseleave: function(event) {     console.log("mouseleave on port"); }, // handle mouse event on port onmouseup: function(event) {     console.log("mouseup on port", this);     emitter.emit('mouse_up', this.payload()); }, onportrendered: function(event) {     emitter.emit('port_onrender', this.payload()); }, // gives detailed information port payload: function() {     return {target: 'port', nodeid: this.props.nodeid, name: this.props.name, x: this.props.x, y: this.props.y}; },  render: function() {     var port = [];      // create clip path crop hide portion of circle     var clipathkey = randomkey();     var rectprops = {key: randomkey(), x: this.props.x, y: this.props.y-5, width: 5, height: 5*2};     if(this.props.inport) {         rectprops.x -= 5; // shift cut-off rectangle left     }     var rect = react.dom.rect(rectprops, null);          port.push(react.createelement("clippath", {key: clipathkey, id:"cut-off-"+clipathkey}, rect));          // create circle     var circleprops = {key: randomkey(), cx: this.props.x, cy: this.props.y, r: 5, fill:"gray", path:"url(#cut-off-"+clipathkey+")"};     port.push(react.dom.circle(circleprops, null));      // notify creation of port     this.onportrendered();      return react.dom.g({key: randomkey()}, port); } }); 

i couldn't find problem, idea what's preventing these events firing?

i've added mouseup listener on svg tag, has been called event not propagated down port!

and looks target of event edge (i.e. path) , not port disabled mouse events on edge follows:

.graph path {   fill: none;   pointer-events: none } 

as temporary solution (as need mouse events on edge editting), i've end-up drawing edge on mouse move events shifted mouse pointer coordinates.