javascript - 拦截 Famo.us 中的链接点击

Question

假设有一个使用包含标记内容的 Famo.us 声明的表面:

this.mySurface = new Surface({
    size : this.options.targetSize,
    content : '<a href="http://famo.us">This is a link</a>',
});

是否有一种(简单的)方法来拦截点击事件？

奖励:除了拦截点击之外，如何传递点击事件以便默认处理程序也完成它的工作？

Answer 1

有几种方法可以处理事件停止。这是我认为最适合您的解决方案。当然，以这种方式加载页面或链接有其自身的注意事项，我们不会在这里深入探讨。

完整代码如下:Example on jsFiddle

首先，我们跟踪目标表面内的点击并调用函数来检查它是否是链接。如果我们点击一​​个链接，我们将发出一个传递目标 href 的事件。

this.mySurface.clickNullifier = function (e) {
    if (e.target && e.target.nodeName == 'A' && e.target.href) {
        this.mySurface.emit('href-clicked', { data: { href: e.target.href } })
        return false;
    }
}.bind(this);

this.mySurface.on('deploy', function () {
    // sets up the click function on the surface DOM object
    this._currentTarget.onclick = this.clickNullifier;
});

既然表面点击已被跟踪，我们将捕获任何拦截的点击并将它们加载到 iFrame 中，或者如果本地链接使用 famous 中的 loadURL 实用程序加载它们。

this.mySurface.on('href-clicked', function (event) {
    console.log(event.data);
    // handle your code for the iframe
    // not always doable in the case of 'X-Frame-Options' to 'SAMEORIGIN'
    loadIframe.call(this, event.data.href);

    // or loadURL like here. Needs CORS open on the href server if cross origin
    //Utility.loadURL(event.data.href, loadLink.bind(this));
}.bind(this));

function loadIframe(content) {
    this.backSurface.setContent('<iframe src="' + content + '" frameborder="0" height="100%" width="100%"></iframe>');
};

奖励:在上面的示例链接中，您会看到点击事件仍然在表面上触发。您可以通过查看控制台日志来了解。