Question

我正在编写一个Chrome扩展程序，当用户查看Google Maps中的全景图像时要执行该程序，但是我无法将车轮运动传播到Google Maps中。我希望它能够传播，以便用户可以在我的扩展程序中缩放图像。

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

当光标移出我的扩展程序的范围（因为鼠标快速移至我的“ div”之外）时，wheel事件将正确传递给Google Maps。

我尝试了用

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

和

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

和

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

和

  $(document).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
}

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

关于“目的是什么？”问题该代码的目的是分析用户指向的感兴趣区域。

在此先感谢您的帮助！

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

Answer 1

fotijr使用CSS属性“ pointer-events：none;”的评论使事件得以通过。不幸的是，现在我需要的鼠标跟踪丢失了。...

我认为不可能做我想做的事。

车轮事件未传播

1 个答案: