javascript - 从 addEventListener 中提取与 this 关键字绑定(bind)的函数

Question

我想修改library function看起来如下:

this.map.getContainer().addEventListener('touchstart', this.fire.bind(map, 'mousedown'));

现在(如果我做对了)，该函数会监听触摸事件，如果发生，则调度相应的鼠标事件。因此它告诉 map 对象像处理鼠标事件一样处理触摸事件。

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 替换它，但它不起作用。

我收到以下错误:

Uncaught TypeError: Cannot read property 'bind' of undefined at HTMLDivElement.onTouchStart

非常感谢您的帮助!

Answer 1

这是 XY problem 的一个实例.

您不需要将触摸事件转换为鼠标事件(touchstart→mousedown、touchmove→mousemove ，touchend→mouseup)，反之亦然:浏览器已经为您执行此操作。

我强烈建议您观看"Getting Touchy" presentation from 2015以及阅读 corresponding slide deck 。它深入解释了不同的浏览器如何调度鼠标(和指针)事件以及触摸事件。

即使您仅在触摸事件的某些条件下调度 mousedown/up/move，您也会收到 < em>重复单次触摸的mousedown/up/move事件。

<小时/>

另一方面:这里有一种绑定(bind)事件处理程序的干净方法...

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()是如何call 应用于事件处理程序函数，不应用于事件处理程序内部的函数调用。这使得事件处理程序中 this 的值成为 bind() 的参数。

“传单方式”将是...

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

...这是对 bind 和 addEventListener 的几个包装器。 L.DomEvent 还可以处理浏览器异常(在某些情况下，触摸屏上的 dblclick)，并转换非标准 IE10 的 MSPointerDown (等)，因此touch* 事件在具有 IE10 和触摸屏的 Win7 计算机上可以正常工作。