在 Famo.us 中拦截链接点击

Question

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

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

有没有（简单的）方法来拦截点击事件？

Bonus：除了拦截点击，如何传递点击事件，让默认处理程序也能完成它的工作？

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 中，或者如果本地链接使用著名的 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>');
};

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

Answer 2

您不能直接在 Surface 中打开新链接，但可以添加 IFrameSurface 之类的内容：Famo.us IframeSurface

正如我们所暗示的，您很可能希望将事件处理程序添加到表面的点击中：

this.mySurface.on('click', function(e) {
    // Bonus: on click do the standard redirect on main window
    // or redirect of iFrame control
    window.location = "http://famo.us";
});

然后您只需要文本“这是一个链接”而不是内容中的 href，因为处理程序提供了通常预期的逻辑，但通过拦截。

如果您出于某种原因需要将它们保留为“链接”，您可以尝试将哈希添加到 href 以避免实际通过默认行为进行导航。

作为替代方案，因为我们无论如何都在使用 javascript，所以您可以尝试以下方法：

use javascript to intercept all document link clicks