diff --git a/demo/close_button.js b/demo/close_button.js
index 041fa5ea5..658de2ec8 100644
--- a/demo/close_button.js
+++ b/demo/close_button.js
@@ -23,11 +23,15 @@ shakaDemo.CloseButton = class extends shaka.ui.Element {
     super(parent, controls);
     this.button_ = document.createElement('button');
     this.button_.classList.add('material-icons-round');
+    this.button_.classList.add('shaka-no-propagation');
     this.button_.classList.add('close-button');
     this.button_.textContent = 'close'; // Close icon.
     this.parent.appendChild(this.button_);
 
     this.button_.addEventListener('click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       shakaDemoMain.unload();
     });
 
diff --git a/ui/ad_statistics_button.js b/ui/ad_statistics_button.js
index 6373f5f17..469914e63 100644
--- a/ui/ad_statistics_button.js
+++ b/ui/ad_statistics_button.js
@@ -127,6 +127,9 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onClick_();
       this.updateLocalizedStrings_();
     });
diff --git a/ui/airplay_button.js b/ui/airplay_button.js
index f34c75539..e3d966ed4 100644
--- a/ui/airplay_button.js
+++ b/ui/airplay_button.js
@@ -81,6 +81,9 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.airplayButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onAirPlayClick_();
     });
 
diff --git a/ui/cast_button.js b/ui/cast_button.js
index c636e9ade..3a1d003c6 100644
--- a/ui/cast_button.js
+++ b/ui/cast_button.js
@@ -81,6 +81,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.castButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onCastClick_();
     });
 
diff --git a/ui/chapter_selection.js b/ui/chapter_selection.js
index f456cf603..ce2cc4496 100644
--- a/ui/chapter_selection.js
+++ b/ui/chapter_selection.js
@@ -154,6 +154,9 @@ shaka.ui.ChapterSelection = class extends shaka.ui.SettingsMenu {
         button.appendChild(span);
 
         this.eventManager.listen(button, 'click', () => {
+          if (!this.controls.isOpaque()) {
+            return;
+          }
           this.video.currentTime = chapter.startTime;
         });
 
diff --git a/ui/controls.js b/ui/controls.js
index db00082f5..f8d62d9b6 100644
--- a/ui/controls.js
+++ b/ui/controls.js
@@ -406,6 +406,15 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       const cb = (event) => event.stopPropagation();
       this.eventManager_.listen(element, 'click', cb);
       this.eventManager_.listen(element, 'dblclick', cb);
+      if (navigator.maxTouchPoints > 0) {
+        const touchCb = (event) => {
+          if (!this.isOpaque()) {
+            return;
+          }
+          event.stopPropagation();
+        };
+        this.eventManager_.listen(element, 'touchend', touchCb);
+      }
     }
   }
 
diff --git a/ui/fast_forward_button.js b/ui/fast_forward_button.js
index ce8284bbd..955395c1f 100644
--- a/ui/fast_forward_button.js
+++ b/ui/fast_forward_button.js
@@ -53,6 +53,9 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.fastForward_();
     });
   }
diff --git a/ui/fullscreen_button.js b/ui/fullscreen_button.js
index ca9d86638..e53329264 100644
--- a/ui/fullscreen_button.js
+++ b/ui/fullscreen_button.js
@@ -55,6 +55,9 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', async () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       await this.controls.toggleFullScreen();
     });
 
diff --git a/ui/loop_button.js b/ui/loop_button.js
index 9ee07d7da..5e0a70b0b 100644
--- a/ui/loop_button.js
+++ b/ui/loop_button.js
@@ -73,6 +73,9 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onClick_();
     });
 
diff --git a/ui/mute_button.js b/ui/mute_button.js
index 7deebd659..17ba59000 100644
--- a/ui/mute_button.js
+++ b/ui/mute_button.js
@@ -72,6 +72,9 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       if (this.ad && this.ad.isLinear()) {
         this.ad.setMuted(!this.ad.isMuted());
       } else {
diff --git a/ui/overflow_menu.js b/ui/overflow_menu.js
index 47a32700c..4376ce03a 100644
--- a/ui/overflow_menu.js
+++ b/ui/overflow_menu.js
@@ -86,6 +86,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.overflowMenuButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onOverflowMenuButtonClick_();
     });
 
diff --git a/ui/pip_button.js b/ui/pip_button.js
index 93bd8d28e..443032fda 100644
--- a/ui/pip_button.js
+++ b/ui/pip_button.js
@@ -87,6 +87,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.pipButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.controls.togglePiP();
     });
 
diff --git a/ui/play_button.js b/ui/play_button.js
index 16c266633..d4357b521 100644
--- a/ui/play_button.js
+++ b/ui/play_button.js
@@ -77,6 +77,9 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     });
 
     this.eventManager.listen(this.button, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.controls.playPausePresentation();
     });
 
diff --git a/ui/presentation_time.js b/ui/presentation_time.js
index 9fa981eb0..9e255ccf6 100644
--- a/ui/presentation_time.js
+++ b/ui/presentation_time.js
@@ -35,6 +35,9 @@ shaka.ui.PresentationTimeTracker = class extends shaka.ui.Element {
     this.parent.appendChild(this.currentTime_);
 
     this.eventManager.listen(this.currentTime_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       // Jump to LIVE if the user clicks on the current time.
       if (this.player.isLive()) {
         this.video.currentTime = this.player.seekRange().end;
diff --git a/ui/recenter_vr.js b/ui/recenter_vr.js
index 250e7ea49..41dfd8596 100644
--- a/ui/recenter_vr.js
+++ b/ui/recenter_vr.js
@@ -74,6 +74,9 @@ shaka.ui.RecenterVRButton = class extends shaka.ui.Element {
     const vr = this.controls.getVR();
 
     this.eventManager.listen(this.recenterVRButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       vr.reset();
     });
 
diff --git a/ui/remote_button.js b/ui/remote_button.js
index 97ec58bd2..f3b4ee05e 100644
--- a/ui/remote_button.js
+++ b/ui/remote_button.js
@@ -90,6 +90,9 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
       });
 
       this.eventManager.listen(this.remoteButton_, 'click', () => {
+        if (!this.controls.isOpaque()) {
+          return;
+        }
         this.video.remote.prompt();
       });
 
diff --git a/ui/rewind_button.js b/ui/rewind_button.js
index a1466079e..e6ba9780c 100644
--- a/ui/rewind_button.js
+++ b/ui/rewind_button.js
@@ -54,6 +54,9 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.button_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.rewind_();
     });
   }
diff --git a/ui/settings_menu.js b/ui/settings_menu.js
index 6a81b463c..bad647c41 100644
--- a/ui/settings_menu.js
+++ b/ui/settings_menu.js
@@ -37,6 +37,9 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.inOverflowMenu_();
 
     this.eventManager.listen(this.button, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       this.onButtonClick_();
     });
   }
diff --git a/ui/toggle_stereoscopic.js b/ui/toggle_stereoscopic.js
index aafa020fe..c035c9ddf 100644
--- a/ui/toggle_stereoscopic.js
+++ b/ui/toggle_stereoscopic.js
@@ -75,6 +75,9 @@ shaka.ui.ToggleStereoscopicButton = class extends shaka.ui.Element {
     const vr = this.controls.getVR();
 
     this.eventManager.listen(this.toggleStereoscopicButton_, 'click', () => {
+      if (!this.controls.isOpaque()) {
+        return;
+      }
       vr.toggleStereoscopicMode();
     });