React Vorlage Mausereignis ausgelöst, nachdem Container Maus Ereignis

Question

Ich bin mit einem solchen Problem gestoßen: Es gibt Elternelement mit Mousedown-Handler und untergeordnete Elemente.

Wenn ich Kind-Element hinzufügen, indem Vorlage mit mousedown- Handler innerhalb

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

dann Eltern mousedown- Brände vor Kind Ereignis (jsfiddle example)

Gibt es eine Möglichkeit Kind mousedown- zu zwingen erste (und zu verhindern Eltern mousedown- Reagieren zu schaffen mit e.stopPropagation zum Beispiel), ohne alles in react template neu zu schreiben?

Answer 1

Da Sie jQuery für einige Ereignishandler und React für den anderen verwenden, kann die Reihenfolge der Ereignisse nicht wirklich mit e.stopPropagation verwaltet werden. Nicht einmal Event-Bubbling funktionierte, soweit ich weiß, aufgrund einiger Tests, die ich gemacht habe.

Eine Lösung wäre, entweder React zu verwenden, um alles zu verwalten, aber wenn das keine Option ist, könnten Sie explizit überprüfen, auf welche Komponente Sie klicken und die Ausführung von parent bei Bedarf stoppen.

Zum Beispiel:

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

das Ereignisobjekt an den Ereignishandler Durch die Übergabe können Sie überprüfen, welches Element geklickt wurde. Wenn wir auf irgendein Element, das nicht parent ist, geklickt haben, dann Rückkehr. Wenn das Element geklickt hat die parent ID, dann wird es das Konsolenprotokoll tun.

Hier ist eine vollständige Demo: 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')); 
});