Wheel event not propagating

Question

I am writing a Chrome Extension to be executed when the user is looking at a panorama image in Google Maps, and I am having problems getting wheel movements to be propagated to Google Maps. I want this to propagate so the user can zoom the image from within my extension.

I have tried to ignore the event completely in my injection script, but that doesn't work. I then tried to capture the event and then pass it on via JavaScript, and that doesn't work either. The event is always captured, but passing it on doesn't work.

When the cursor escapes the scope of my Extension (because the mouse is moved quickly outside of my 'div'), the wheel event is being passed to Google Maps correctly.

I have tried the capture with

  expandingBox = document.createElement('div');
  expandingBox.addEventListener('wheel', mouseWheel, false);

and

  expandingBox = document.createElement('div');
  expandingBox.addEventListener('wheel', mouseWheel, true);

and

  $(document).addEventListener('wheel', mouseWheel, true);

and

  $(document).addEventListener('wheel', mouseWheel, false);

The capture function is very simple:

  function mouseWheel( e ) {

       // alert("Wheel was moved");
        $(document).trigger("wheel", e);

        return true;

      }

I have also tried with "return false", with '$(window)', and '$(window.parent)' in the function mouseWheel. All to no avail.

Is it even possible to do what I am attempting to do?

A minimal implementation that tests this functionality is:

manifest.json

{
  "name": "Wheel Test",
  "version": "0.3",
  "description": "See if I can read and pass a Wheel event",
  "background": {
    "persistent": false,
    "scripts": ["background.js", "jquery-3.3.1.min.js" ]
  },

  "default_locale": "en",

  "permissions": [
    "activeTab",
    "notifications",
    "<all_urls>"
  ],

  "browser_action":{
    "default_icon": {
      "20": "data/icons/QRC-Ninja-20.png"
    }
  },

  "manifest_version": 2
}

background.js

"use strict";

function injectCode( tab ){

  chrome.tabs.insertCSS(tab.id, { file: 'data/inject/inject.css' } );
  chrome.tabs.executeScript(tab.id , { file: 'jquery-3.3.1.min.js'});
  chrome.tabs.executeScript(tab.id , { file: 'data/inject/inject.js'});

}
// Listen for a click on the icon. On that click, inject the necessary code and get going.
chrome.browserAction.onClicked.addListener( injectCode );

inject.css

.expanding-box {
  box-sizing: border-box;
  position: fixed;
  z-index: 2147483645;
  border: 0px solid;
  width: 0;
  height: 0;
}

inject.js

'use strict';

var guide = window.guide;
var expandingBox = null;

try {

  guide.remove();

} catch (e) {}

guide = (function () {

  function stop(){

    guide.remove();

  }

  function mouseWheel( e ) {

//        alert("Wheel was moved");

        var result = expandingBox.dispatchEvent( e );

        return true;

  }

  return {
    install: function () {  
      expandingBox = document.createElement('div');
      expandingBox.setAttribute('class', 'expanding-box');
      expandingBox.setAttribute('id', 'expandingBox'); 
      document.body.appendChild(expandingBox);
      //
      // Initial position is the top left of the window
      //
      expandingBox.style.borderWidth =  '4px';
      expandingBox.style.borderColor = 'red';
      expandingBox.style.width = '200px';
      expandingBox.style.height = '200px';

      expandingBox.addEventListener('wheel', mouseWheel, false);
      document.addEventListener('mouseup', stop, false);
    },
    remove: function () {
      expandingBox.removeEventListener('wheel', mouseWheel, false);
      document.removeEventListener('mouseup', stop, false);
      if (expandingBox && expandingBox.parentNode) {
        expandingBox.parentNode.removeChild(expandingBox);
      }

    }
  };
})();

guide.install();

Regarding the question "What is the purpose?" The purpose of the code is to analyse an area of interest that the user points to.

Thanks in advance for your help!

In the meantime, I discovered that fotijr has provided an answer that worked.

Your code doesn't tell us much really. For example, you don't show the div being added to anything so the immediate response should be *"You've not added the div to anything"*. (I suspect you have though). Please create a **[mcve]** that demonstrates your problem. — Reinstate Monica Cellio, Dec 14 '18 at 12:58
What is the purpose? It doesn't make much sense to capture an event, and then in the handler trigger the same event again ..? Looks like an infinite event loop to me, but this maybe due to the too short snippets of the code provided. What comes to the [wheel event](https://developer.mozilla.org/en-US/docs/Web/Events/wheel), it is bubbling, but have you actually appended the newly-created div to the DOM? — Teemu, Dec 14 '18 at 13:03
It's hard to tell from you description and code examples, but this could be a styling issue. If you're trying to ignore mouse events on one element and have them "pass through" to an element behind/underneath your element, set the element's style to `pointer-events: none;`. — fotijr, Dec 14 '18 at 13:17

score 0 · Answer 1 · answered Dec 15 '18 at 21:10

0

The comment from fotijr of using the CSS attribute "pointer-events: none;" got the events to pass through. Unfortunately, now the mouse tracking that I need is lost....

I don't think it is possible to do what I am attempting.

answered Dec 15 '18 at 21:10

Edward Caulfield

13
5

Wheel event not propagating

1 Answers1