createjs 防止超链接交互

Question

在我的简单应用程序中 canvas 由超链接包裹。一些放置在 canvas 舞台上的对象在 click 事件上有特殊的鼠标交互。是否有任何可能的解决方案来防止通过使用鼠标单击事件侦听器单击对象来跳转超链接？

Answer 1

通常您可以在生成的鼠标事件上调用 preventDefault，它会停止触发 link 事件。

element.addEventListener("click", function(e) { 
    e.preventDefault(); 
}, false);

使用 EaselJS 是不可能的，因为尽管您可以在任何 EaselJS 鼠标事件上访问 nativeEvent，但 EaselJS 根本不使用 "click" 事件（而是使用 "mousedown" 和 "mouseup"）。因此，阻止点击事件的默认值将无济于事。

不起作用

// You would expect this to work.
myShape.on("click", function(e) {
    e.nativeEvent.preventDefault(); // Nothing. This cancels a "mouseup" instead.
});

解决方法

但是，您可以很容易地解决这个问题。每次单击时都在单击的项目（或您在应用程序中设置它的任何位置）上设置一个标志。

myShape.addEventListener("click", function(event) {
  myShape.clicked = true;
}, false);

然后，自己监听canvas点击事件，检查检查flag。确保在之后重置它。这是可能的，因为 "click" 总是在 "mouseup"

之后触发

stage.canvas.addEventListener("click", function(event) {
     if (myShape.clicked) { event.preventDefault(); }
     myShape.clicked = false;
}, false);

这里是一个快速的 fiddle 展示它的工作。 http://jsfiddle.net/buqkvb1u/

我们正在寻找在 EaselJS 中处理这是否有意义。感谢您的报告！

createjs 防止超链接交互

createjs prevent hyperlink interaction

javascript

event-handling

dom-events

easeljs

createjs

不起作用

解决方法