--- a/devtools/client/inspector/markup/views/element-container.js
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -65,16 +65,17 @@ MarkupElementContainer.prototype = exten
     MarkupContainer.prototype.destroy.call(this);
   },
 
   onContainerClick: function(event) {
     if (!event.target.hasAttribute("data-event")) {
       return;
     }
 
+    this.editor.eventBadge.style.pointerEvents = "none";
     this._buildEventTooltipContent(event.target);
   },
 
   /**
    * Handler for "flexbox-highlighter-hidden" and "flexbox-highlighter-shown" event
    * emitted from the HighlightersOverlay. Toggles the active state of the display badge
    * if it matches the highlighted flex container node.
    */
@@ -90,29 +91,33 @@ MarkupElementContainer.prototype = exten
    */
   onGridHighlighterChange: function() {
     this.editor.displayBadge.classList.toggle("active",
       this.markup.highlighters.gridHighlighterShown === this.node);
   },
 
   async _buildEventTooltipContent(target) {
     const tooltip = this.markup.eventDetailsTooltip;
-
     await tooltip.hide();
 
     const listenerInfo = await this.node.getEventListenerInfo();
 
     const toolbox = this.markup.toolbox;
 
     setEventTooltip(tooltip, listenerInfo, toolbox);
     // Disable the image preview tooltip while we display the event details
     this.markup._disableImagePreviewTooltip();
     tooltip.once("hidden", () => {
       // Enable the image preview tooltip after closing the event details
       this.markup._enableImagePreviewTooltip();
+      this.markup.win.setTimeout(() => {
+        if (this.editor.eventBadge) {
+          this.editor.eventBadge.style.pointerEvents = "auto";
+        }
+      }, 0);
     });
     tooltip.show(target);
   },
 
   /**
    * Generates the an image preview for this Element. The element must be an
    * image or canvas (@see isPreviewable).
    *