Question

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

如果我通过在

中使用mousedown处理程序创建React模板来添加子元素

  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'));

然后父母mousedown在子事件(jsfiddle example)

之前触发

有没有办法先强制孩子mousedown（例如，在没有重写反应模板中的所有内容的情况下阻止父母使用e.stopPropagation进行mousedown）？

Answer 1

因为你正在为一些事件处理程序使用jQuery而为另一个使用React，所以事件的顺序不能仅用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'));
});

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

1 个答案: