--- a/devtools/client/inspector/animation/components/AnimationDetailHeader.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailHeader.js
@@ -13,19 +13,20 @@ const { getFormattedTitle } = require(".
 class AnimationDetailHeader extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
       setDetailVisibility: PropTypes.func.isRequired,
     };
   }
 
-  onClick() {
+  onClick(e) {
     const { setDetailVisibility } = this.props;
     setDetailVisibility(false);
+    e.stopPropagation();
   }
 
   render() {
     const { animation } = this.props;
 
     return dom.div(
       {
         className: "animation-detail-header devtools-toolbar",

--- a/devtools/client/inspector/animation/components/CurrentTimeScrubberController.js
+++ b/devtools/client/inspector/animation/components/CurrentTimeScrubberController.js
@@ -63,39 +63,44 @@ class CurrentTimeScrubberController exte
     this.controllerArea = thisEl.getBoundingClientRect();
     this.listenerTarget = thisEl.closest(".animation-list-container");
     this.listenerTarget.addEventListener("mousemove", this.onMouseMove);
     this.listenerTarget.addEventListener("mouseout", this.onMouseOut);
     this.listenerTarget.addEventListener("mouseup", this.onMouseUp);
     this.listenerTarget.classList.add("active-scrubber");
 
     this.updateAnimationsCurrentTime(e.pageX, true);
+    e.stopPropagation();
   }
 
   onMouseMove(e) {
     this.isMouseMoved = true;
     this.updateAnimationsCurrentTime(e.pageX);
+    e.stopPropagation();
   }
 
   onMouseOut(e) {
     if (!this.listenerTarget.contains(e.relatedTarget)) {
       const endX = this.controllerArea.x + this.controllerArea.width;
       const pageX = endX < e.pageX ? endX : e.pageX;
       this.updateAnimationsCurrentTime(pageX, true);
       this.uninstallListeners();
     }
+
+    e.stopPropagation();
   }
 
   onMouseUp(e) {
     if (this.isMouseMoved) {
       this.updateAnimationsCurrentTime(e.pageX, true);
       this.isMouseMoved = null;
     }
 
     this.uninstallListeners();
+    e.stopPropagation();
   }
 
   uninstallListeners() {
     this.listenerTarget.removeEventListener("mousemove", this.onMouseMove);
     this.listenerTarget.removeEventListener("mouseout", this.onMouseOut);
     this.listenerTarget.removeEventListener("mouseup", this.onMouseUp);
     this.listenerTarget.classList.remove("active-scrubber");
     this.listenerTarget = null;

--- a/devtools/client/inspector/animation/components/NoAnimationPanel.js
+++ b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -36,17 +36,20 @@ class NoAnimationPanel extends PureCompo
         null,
         L10N.getStr("panel.noAnimation")
       ),
       dom.button(
         {
           className: "animation-element-picker devtools-button" +
                      (elementPickerEnabled ? " checked" : ""),
           "data-standalone": true,
-          onClick: toggleElementPicker
+          onClick: e => {
+            toggleElementPicker();
+            e.stopPropagation();
+          }
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {

--- a/devtools/client/inspector/animation/components/PauseResumeButton.js
+++ b/devtools/client/inspector/animation/components/PauseResumeButton.js
@@ -49,27 +49,29 @@ class PauseResumeButton extends PureComp
     const targetEl = this.getKeyEventTarget();
     targetEl.removeEventListener("keydown", this.onKeyDown);
   }
 
   getKeyEventTarget() {
     return ReactDOM.findDOMNode(this).closest("#animation-container");
   }
 
-  onToggleAnimationsPlayState() {
+  onToggleAnimationsPlayState(e) {
     const { setAnimationsPlayState } = this.props;
     const { isPlaying } = this.state;
 
     setAnimationsPlayState(!isPlaying);
+    e.stopPropagation();
   }
 
   onKeyDown(e) {
     if (e.keyCode === KeyCodes.DOM_VK_SPACE) {
       this.onToggleAnimationsPlayState();
       e.preventDefault();
+      e.stopPropagation();
     }
   }
 
   updateState() {
     const { animations } = this.props;
     const isPlaying = hasPlayingAnimation(animations);
     this.setState({ isPlaying });
   }

--- a/devtools/client/inspector/animation/components/RewindButton.js
+++ b/devtools/client/inspector/animation/components/RewindButton.js
@@ -18,16 +18,19 @@ class RewindButton extends PureComponent
   }
 
   render() {
     const { rewindAnimationsCurrentTime } = this.props;
 
     return dom.button(
       {
         className: "rewind-button devtools-button",
-        onClick: rewindAnimationsCurrentTime,
+        onClick: e => {
+          rewindAnimationsCurrentTime();
+          e.stopPropagation();
+        },
         title: getStr("timeline.rewindButtonTooltip"),
       }
     );
   }
 }
 
 module.exports = RewindButton;

--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -28,18 +28,19 @@ class SummaryGraph extends PureComponent
   }
 
   constructor(props) {
     super(props);
 
     this.onClick = this.onClick.bind(this);
   }
 
-  onClick() {
+  onClick(e) {
     this.props.selectAnimation(this.props.animation);
+    e.stopPropagation();
   }
 
   getTitleText(state) {
     const getTime =
       time => getFormatStr("player.timeLabel", numberWithDecimals(time / 1000, 2));
 
     let text = "";