Question

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

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

是否有（简单）方法拦截点击事件？

奖励：除了拦截点击之外，如何通过点击事件以使默认处理程序也能完成其工作？

Answer 1

您无法直接在曲面中打开新链接，但可以添加类似IFrameSurface的内容：Famo.us IframeSurface

正如annorest暗示的那样，你很可能想要点击表面添加一个事件处理程序：

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";
});

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

如果您需要将其保留为＆＃39;链接＆＃39;出于某种原因，您可以尝试向href添加哈希，以避免实际导航通过默认行为。

作为替代方案，因为我们无论如何都在javascript中工作，您可以尝试以下方式：

use javascript to intercept all document link clicks

Answer 2

有几种方法可以处理事件停止。以下是我认为最适合您的解决方案。当然，以这种方式加载页面或链接有其自己的警告，我们不会在这里过深。

以下是完整代码：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>');
};

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

拦截Famo.us中的链接点击次数

2 个答案: