Set pointerEvents style programmatically instead of relying on ol.css

src/ol/control/Attribution.js

@@ -48,10 +48,10 @@ class Attribution extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private

src/ol/control/Control.js

@@ -83,6 +83,17 @@ class Control extends BaseObject {
     }
   }
 
+  /**
+   * Creates the element for this control and sets it on the instance.
+   * @return {HTMLDivElement} Element for this control.
+   */
+  createElement() {
+    const element = document.createElement('div');
+    element.style.pointerEvents = 'auto';
+    this.element = element;
+    return element;
+  }
+
   /**
    * Clean up.
    */

src/ol/control/FullScreen.js

@@ -72,9 +72,9 @@ class FullScreen extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private

src/ol/control/MousePosition.js

@@ -60,16 +60,15 @@ class MousePosition extends Control {
   constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
-    const element = document.createElement('div');
-    element.className =
-      options.className !== undefined ? options.className : 'ol-mouse-position';
-
     super({
-      element: element,
       render: options.render,
       target: options.target,
     });
 
+    const element = this.createElement();
+    element.className =
+      options.className !== undefined ? options.className : 'ol-mouse-position';
+
     this.addEventListener(
       getChangeEventType(PROJECTION),
       this.handleProjectionChanged_

src/ol/control/OverviewMap.js

@@ -80,10 +80,10 @@ class OverviewMap extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private

src/ol/control/Rotate.js

@@ -38,10 +38,10 @@ class Rotate extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     const className =
       options.className !== undefined ? options.className : 'ol-rotate';

src/ol/control/ScaleLine.js

@@ -86,10 +86,10 @@ class ScaleLine extends Control {
         : 'ol-scale-line';
 
     super({
-      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @private

src/ol/control/Zoom.js

@@ -37,9 +37,9 @@ class Zoom extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       target: options.target,
     });
+    this.createElement();
 
     const className =
       options.className !== undefined ? options.className : 'ol-zoom';

src/ol/control/ZoomSlider.js

@@ -48,9 +48,9 @@ class ZoomSlider extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       render: options.render,
     });
+    this.createElement();
 
     /**
      * @type {!Array.<import("../events.js").EventsKey>}

src/ol/control/ZoomToExtent.js

@@ -33,9 +33,9 @@ class ZoomToExtent extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
-      element: document.createElement('div'),
       target: options.target,
     });
+    this.createElement();
 
     /**
      * @type {?import("../extent.js").Extent}