Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking e

Posted 2023-05-11 小小菜鸟之路

这个警告意味着在事件监听器中，添加了一个阻止页面滚动的 `mousewheel` 事件，但是该事件监听器并没有标记为被动事件监听器（passive event listener）。这可能会导致页面滚动变得不流畅，特别是在移动设备上。

为了解决这个问题，您需要将事件监听器标记为被动事件监听器。具体实现方法如下：

1. 使用 `addEventListener` 添加事件监听器时，将第三个参数设置为 `passive: true`。

例如：

```
element.addEventListener(\'mousewheel\', this.handleMouseWheel, passive: true);
```

2. 如果使用 jQuery 等框架或库来添加事件监听器，则需要在选项对象中添加 `passive: true` 属性。

例如：

```
$(element).on(\'mousewheel\', this.handleMouseWheel, passive: true);
```

如果您无法修改事件监听器，可以尽量减少阻止页面滚动的情况以降低影响。您也可以在 Chrome DevTools 中打开 Performance 标签，然后进行录制和分析以查看页面滚动的性能。

-----------------------------------------------------------------

`this.handleMouseWheel` 是一个函数，它是用来处理 `mousewheel` 事件的。您可以根据自己的需要编写适当的 `handleMouseWheel` 函数。

下面是一个示例 `handleMouseWheel` 函数，它可以让页面上的元素向上或向下滚动。具体来说，当鼠标滚轮向上滚动时，该函数会使元素向上滚动一定距离；当鼠标滚轮向下滚动时，该函数会向下滚动一定距离。

```
handleMouseWheel(event)
// 阻止默认的鼠标滚轮事件
event.preventDefault();

// 获取滚轮变化量
const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

// 获取要滚动的元素和滚动距离
const element = document.getElementById(\'element-to-scroll\');
const scrollDistance = 100; // 你需要滚动的距离

// 计算新的滚动位置
const scrollTop = element.scrollTop;
const newScrollTop = scrollTop - delta * scrollDistance;

// 滚动元素到新的位置
element.scrollTop = newScrollTop;

```

请注意，上述示例需要您先在 HTML 页面中定义一个具有 ID `element-to-scroll` 的元素。您需要将示例中的 `scrollDistance` 变量设置为您想要的滚动距离。

当然，具体的处理函数的实现应该根据具体的业务需求进行编写。

Egret的Shape

class ShapeTest extends egret.DisplayObjectContainer {
	public constructor() {
		super();
		this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
	}
	private onAddToStage(event:egret.Event){
		var shp:egret.Shape = new egret.Shape();
		shp.graphics.lineStyle(10,0x00ff00);//第一个参数：描边的线条宽度，第二个参数是描边的颜色
		shp.graphics.beginFill(0xff0000,0.8);//red 设置矩形的填充颜色，第二个参数是透明度；1表示透明度 
		shp.graphics.drawRect(0,0,100,200);//设置矩形的形状，绘制的是100*200的矩形  
		shp.graphics.lineStyle(10,0x00ff00);//无作用
		shp.graphics.endFill();//结束当前绘制操作 若要对矩形加描边，可以设置线条的样式
		//通关lineStyle方法来设置 代码需要放在绘制代码之前,否则无效，且不报错 
		this.addChild(shp);
        ///////////////////////清空绘制:将已经绘制的图像全部清空////////////////////////////////////////////////
		//shp.graphics.clear();
	}
	private drawCircle(event:egret.Event){
		var shp:egret.Shape = new egret.Shape();
		
	}
}