React模板鼠标事件在容器的鼠标事件后触发

Question

我碰到过这样的问题： 有mousedown处理程序和子元素的父元素。

如果我需要通过创建子事件之前，鼠标按下处理器阵营里

var mousedown = function(e) { console.log('child-2: mousedown') }; 
    var childTemplate = React.createClass({ 
    render: function() { 
     return React.createElement("rect", {id: "child-2", x: "220", y: "220", width: "30", height: "30", onMouseDown: mousedown, fill: "blue"}); 
    } 
    }); 

    var template = React.createElement(childTemplate, {}); 
    ReactDOM.render(template, document.getElementById('area')); 

然后父鼠标按下火灾模板添加子元素(jsfiddle example)

有没有办法先强迫孩子鼠标按下（并阻止父母的鼠标按下与例如e.stopPropagation）而不重写反应模板中的所有内容？

Answer 1

因为您正在使用jQuery处理某些事件处理程序，而针对其他事件处理程序使用jQuery，因此事件顺序不能仅通过e.stopPropagation进行管理。根据我所做的一些测试，甚至没有发生事件冒泡。

解决方法是使用React来管理所有内容，但如果这不是一个选项，您可以明确地检查您点击哪个组件，并在需要时停止运行parent。

例如：

$('#parent').unbind('mousedown').bind('mousedown', function(e) { 
    if(e.target.id != "parent") return; //if not "#parent" don't proceed. 
    console.log('parent: mousedown'); 
}); 

通过传递事件对象到事件处理程序，您可以检查被点击哪个元素。如果我们点击任何元素不是parent，然后返回。如果元素点击确实有parent ID，那么它将执行控制台日志。

这里是一个完整的演示：Fiddle

$(document).ready(function() { 
    $('#parent').unbind('mousedown').bind('mousedown', function(e) { 
    if(e.target.id != "parent") return; 
    console.log('parent: mousedown'); 
    }); 

    $('#child-1').on('mousedown', function() { 
    console.log('child-1: mousedown'); 
    }); 

    var mousedown = function(e) { 
    console.log('child-2: mousedown') 
    }; 

    var childTemplate = React.createClass({ 
    render: function() { 
     return React.createElement("rect", {id: "child-2", x: "220", y: "220", width: "30", height: "30", onMouseDown: mousedown, fill: "blue"}); 
    } 
    }); 

    var template = React.createElement(childTemplate, {}); 
    ReactDOM.render(template, document.getElementById('area')); 
});