启用触摸事件会导致在移动Chrome中使用Createjs滚动页面时触发click事件

Question

我正在使用Createjs库构建广告横幅，并且在点击事件和启用触摸事件方面遇到了问题。在移动版Chrome和Firefox上会发生此问题。

横幅具有一个单击事件，该事件附加到画布的完整大小的大按钮上。还有一个较小的按钮，它可以打开一个小的覆盖层，用户可以在其中滚动一个小窗口，这就是我需要启用Touch事件的原因。

我所遇到的问题是，当这些横幅在页面的下方，并且用户正在滚动页面时，如果在滚动（向上或向下滑动）时他们的手指落在我的横幅上，则会触发点击事件。

我禁用触摸事件后问题消失了，但是覆盖窗口中的滚动不再适用于移动设备。在iOS Safari中不会发生此问题。

我建立了一个非常简单的测试，将其放置在页面的iframe中足够长的时间来滚动，它可以准确地再现问题。

这是我进行的测试的javascript代码。

stage = new createjs.Stage("testCanvas");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);

var rect = new createjs.Shape();
rect.graphics.beginFill("#ff0000").drawRect(0, 0, 300, 250);
rect.x = 0;
rect.y = 0;
stage.addChild(rect);
stage.update();

rect.addEventListener("click", onHotspotClick.bind(this));

function onHotspotClick(evt) {
    window.open(clickTag, '_blank');
}

我知道我可以使用isTouch来确定点击与点击，但是有没有一种方法可以确定用户是否在刷文档还是点击？

Answer 1

尝试在此处使用库。最新版本的createjs库。 https://zimjs.org/cdn/1.3.0/createjs.js