从 addEventListener 中提取带有此关键字的绑定函数

Question

我想修改一个如下所示的库函数：this.map.getContainer().addEventListener('touchstart', this.fire.bind(map, 'mousedown'));现在（如果我做对了），该函数会侦听触摸事件，如果发生，则调度相应的鼠标事件。所以它告诉地图对象像处理鼠标事件一样处理触摸事件。this.map.on('mousedown', this.eventHandlers.mouseDown);this.eventHandlers = {    mouseDown: this.events.mouseDown.bind(this),};我想修改上面的函数，以便区分单指触摸事件和多点触摸事件，如下所示：element.addEventListener('touchstart', onTouchStart);function onTouchStart(e) {     if (e.touches.length > 1) { foo() } else { this.fire.bind(map, 'mousedown') }};但是，仅将上述侦听器函数放在那里是行不通的。我尝试使用 e.currentTarget 并创建一个 var otherThis = this，然后用 otherThis 替换它，但它没有用。我收到以下错误：未捕获的类型错误：无法读取 HTMLDivElement.onTouchStart 处未定义的属性“绑定”非常感谢帮助！

Answer 1

这是XY 问题的一个实例。

您不需要将触摸事件转换为鼠标事件（touchstart→ mousedown、touchmove→ mousemove、touchend→ mouseup），反之亦然：浏览器已经为您完成了。

我强烈建议您观看2015 年的“Getting Touchy”演示并阅读相应的幻灯片。它深入解释了不同的浏览器如何在触摸事件的同时调度鼠标（和指针）事件。

即使你是调度mousedown/ up/move只为触摸事件的一些情况，您将会收到重复 mousedown/ up/move事件的单点触摸。

另一方面：在这里绑定事件处理程序的一种干净的方法......

element.addEventListener('touchstart', onTouchStart);

function onTouchStart(e) { 

    if (e.touches.length > 1) { foo() } else { this.fire.bind(map, 'mousedown') }

};

...将是...

element.addEventListener('touchstart', onTouchStart.bind(this));

function onTouchStart(e) { 

    if (e.touches.length > 1) { foo() } else { this.fire('mousedown') }

};

请注意bind()调用是如何应用于事件处理程序函数的，而不是应用于事件处理程序内部的函数调用。这使得this事件处理程序内部的值成为 的参数bind()。

“传单方式”将是......

L.DomEvent.on(element, 'touchstart', onTouchStart, this)

...这是几个包装器bind和addEventListener。L.DomEvent还处理浏览器的怪癖（dblclick在某些情况下在触摸屏上），并翻译非标准的 IE10 MSPointerDown（等），以便touch*使用 IE10 和触摸屏的 Win7 机器上的事件将起作用。

Answer 2

这里：

function onTouchStart(e) { 

    if (e.touches.length > 1) { foo() } else { this.fire.bind(map, 'mousedown') }

};

问题是this.fire.bind(map, 'mousedown')。这段代码没有副作用，它只是定义了一个函数。请参阅绑定。但实际上并没有调用它。

要调用它，您可以使用：

this.fire('mousedown');