Question

我正在研究使用SVG绘制节点（即矩形）的应用程序，这些节点在两个端口之间具有端口（即圆圈）和边缘（即路径）。

我将mouseup，mouseenter和mouseleave回调附加到端口以绘制边缘。这些事件被触发但是当我添加以下样式时，mouseup从未被调用，并且在进入时未调用mouseenter但是延迟因此无法绘制边缘！

.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;
}

这是Port React组件：

// A React element representing a node port    
var Port = React.createClass({displayName: "Port",
componentDidMount: function () {
    if(this.props.inport) {
        // if inport then listen for mouse up event
        this.getDOMNode().addEventListener("mouseenter", this.onMouseEnter);
        this.getDOMNode().addEventListener("mouseleave", this.onMouseLeave);
        this.getDOMNode().addEventListener("mouseup", this.onMouseUp);
    }else { 
        // if outport then listen for mouse down event
        this.getDOMNode().addEventListener("mousedown", this.onMouseDown);
    }
},
// handle mouse down event on this 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 up event on this 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 about this 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 a clip path to crop hide a portion of the 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 the cut-off rectangle to the left
    }
    var rect = React.DOM.rect(rectProps, null);     
    port.push(React.createElement("clipPath", {key: cliPathKey, id:"cut-off-"+cliPathKey}, rect));    

    // create a 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 about the creation of this port
    this.onPortRendered();

    return React.DOM.g({key: randomKey()}, port);
}
});

我无法找到问题，知道是什么阻止了这些事件被解雇？

Answer 1

我在SVG标记上添加了一个mouseup侦听器，它已被调用，但事件不会传播到端口！

看起来事件的目标是Edge（即路径）而不是Port，所以我在Edge上禁用了鼠标事件，如下所示：

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

由于这是一个临时解决方案（因为我需要边缘上的鼠标事件进行编辑），所以我最终会在鼠标移动事件的边缘上移动鼠标移动事件。

应用CSS后未触发鼠标事件

1 个答案: