javascript - 应用 CSS 后未触发鼠标事件

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 监听器，它已被调用但事件没有传播到端口!

看起来事件的目标是边缘(即路径)而不是端口，所以我禁用了边缘上的鼠标事件，如下所示:

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

因为这是一个临时解决方案(因为我需要边缘上的鼠标事件进行编辑)，所以我最终在从鼠标指针坐标移动的鼠标移动事件上绘制边缘。