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

Question

我遇到过这样的问题：有 parent 个带有 mousedown 处理程序的元素和 child 个元素。

如果我通过创建带有 mousedown 处理程序的 React 模板来添加 child 元素

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

然后 parent mousedown 在 child 事件 (jsfiddle example)

之前触发

有没有办法先强制 child mousedown （例如用 e.stopPropagation 防止 parent 的 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 的元素，那么 return 就出来了。如果单击的元素确实具有 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 模板鼠标事件

React template mouse event fires after container's mouse event

javascript

mouseevent

dom-events

reactjs