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

--- a/devtools/client/inspector/animation/components/CurrentTimeScrubberController.js
+++ b/devtools/client/inspector/animation/components/CurrentTimeScrubberController.js
@@ -53,45 +53,51 @@ class CurrentTimeScrubberController exte
     const { timeScale } = this.props;
 
     const thisEl = ReactDOM.findDOMNode(this);
     const offset =
       thisEl ? currentTime / timeScale.getDuration() * thisEl.clientWidth : 0;
     this.setState({ offset });
   }
 
-  onMouseDown(e) {
+  onMouseDown(event) {
+    event.stopPropagation();
     const thisEl = ReactDOM.findDOMNode(this);
     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);
+    this.updateAnimationsCurrentTime(event.pageX, true);
   }
 
-  onMouseMove(e) {
+  onMouseMove(event) {
+    event.stopPropagation();
     this.isMouseMoved = true;
-    this.updateAnimationsCurrentTime(e.pageX);
+    this.updateAnimationsCurrentTime(event.pageX);
   }
 
-  onMouseOut(e) {
-    if (!this.listenerTarget.contains(e.relatedTarget)) {
+  onMouseOut(event) {
+    event.stopPropagation();
+
+    if (!this.listenerTarget.contains(event.relatedTarget)) {
       const endX = this.controllerArea.x + this.controllerArea.width;
-      const pageX = endX < e.pageX ? endX : e.pageX;
+      const pageX = endX < event.pageX ? endX : event.pageX;
       this.updateAnimationsCurrentTime(pageX, true);
       this.uninstallListeners();
     }
   }
 
-  onMouseUp(e) {
+  onMouseUp(event) {
+    event.stopPropagation();
+
     if (this.isMouseMoved) {
-      this.updateAnimationsCurrentTime(e.pageX, true);
+      this.updateAnimationsCurrentTime(event.pageX, true);
       this.isMouseMoved = null;
     }
 
     this.uninstallListeners();
   }
 
   uninstallListeners() {
     this.listenerTarget.removeEventListener("mousemove", this.onMouseMove);

--- 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: event => {
+            event.stopPropagation();
+            toggleElementPicker();
+          }
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {

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

--- 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: event => {
+          event.stopPropagation();
+          rewindAnimationsCurrentTime();
+        },
         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,17 +28,18 @@ class SummaryGraph extends PureComponent
   }
 
   constructor(props) {
     super(props);
 
     this.onClick = this.onClick.bind(this);
   }
 
-  onClick() {
+  onClick(event) {
+    event.stopPropagation();
     this.props.selectAnimation(this.props.animation);
   }
 
   getTitleText(state) {
     const getTime =
       time => getFormatStr("player.timeLabel", numberWithDecimals(time / 1000, 2));
 
     let text = "";