Javascript 车轮事件不传播

我正在编写一个Chrome扩展，当用户在Google Maps中查看全景图像时将执行该扩展，并且我在将车轮运动传播到Google Maps时遇到问题。我希望它能够传播，以便用户可以从我的扩展中缩放图像

我试图在我的注入脚本中完全忽略该事件，但这不起作用。然后我尝试捕获事件，然后通过JavaScript将其传递，但这也不起作用。事件始终被捕获，但传递它不起作用

当光标脱离我的扩展范围（因为鼠标在我的“div”之外快速移动）时，滚轮事件将正确地传递给Google Maps

我已经试过了

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

及

及

及

捕获功能非常简单：

  function mouseWheel( e ) {

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

        return true;

      }

我还尝试过在mouseWheel函数中使用“return false”、使用“$（window）”和“$（window.parent）”。都没有用

甚至可以做我想做的事吗

测试此功能的最低实现是：

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
}

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();

关于“目的是什么？”的问题，代码的目的是分析用户所指的感兴趣的领域

提前感谢您的帮助

---

与此同时，我发现fotijr提供了一个有效的答案。

fotijr使用CSS属性“指针事件：无”的评论使事件得以通过。不幸的是，现在我需要的鼠标跟踪丢失了

---

我认为不可能完成我正在尝试的操作。

您的代码实际上没有告诉我们太多。例如，您没有显示正在将div添加到任何内容，因此立即的响应应该是“您没有将div添加到任何内容”。（不过我想你有）。请创建一个演示您的问题的示例。目的是什么？捕获一个事件，然后在处理程序中再次触发同一事件没有多大意义。。？看起来像是一个无限的事件循环，但这可能是因为提供的代码片段太短。问题是，它正在冒泡，但是您是否确实将新创建的div附加到DOM中了？请尝试使用标准的

dispatchEvent（）

而不是jQuery。从您的描述和代码示例很难判断，但这可能是一个样式问题。如果您试图忽略一个元素上的鼠标事件，并让它们“通过”到元素后面/下面的元素，请将该元素的样式设置为

指针事件：无.fotijr-谢谢！！！这就是问题所在！！！
{
  "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
}

"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 );

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

'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();