Question

根据我的理解，可以通过返回false（或使用event.stopPropagation()）来阻止事件冒泡。

我已将click事件绑定到我的锚标记，因此当单击它时，现在使用jQuery＆＃39; s .html()将其加载到元素中。

所有这些在IE以外的所有浏览器上都能正常工作。在IE11上，第一次点击工作并加载iframe，但随后点击iframe（即，＃34;点击暂停＆＃34;或增加音量＆＃34;似乎冒泡并触发{{1将页面滚动到顶部。

我已经读过，在不重定向的锚标记和替代方法中使用href="#"是不好的做法。我同意这个建议，但我真的想知道为什么点击iframe似乎仍然对页面产生影响。

我添加了一些代码＆＃39; register（）`以显示窗口和iframe的上下文不同。

IE11中发生了什么？如果可能的话，如何防止（不删除href）？感谢

＆＃13;

href="#"

＆＃13;

var $, bind, page_click, reg;
$ = jQuery;

bind = function() {
    $(".video").click(function(e) {
        var el, video;
        el = $(e.target);
        while (el.prop("tagName") !== "A") {
            el = el.parent();
        }
        video = '<iframe src="https://player.vimeo.com/video/160755996?color=ffffff&title=0&byline=0&portrait=0&badge=0" width="500" height="264" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
        el.empty().html(video);
        return false;
    });
}

// test code to show that clicking in the iframe's context is indeed not same 
// as the current window
page_click = function(e) {
    alert("page_click");
};

// capture all click events on the window
register = function() {
    window.captureEvents(Event.CLICK);
    return window.onclick = page_click;
};

bind();
register()

＆＃13;

我已创建此plunker以帮助演示我遇到的问题。

Answer 1

这是因为您将iframe放在链接中（在HTML中甚至不起作用。）只需将其放在链接之外，或用链接替换链接。

至于为什么这不是有效的HTML：

http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element描述了a元素的内容模型（您可以在其中加入内容）：

透明，但必须没有interactive content后代。

在第二个链接之下，它说，

互动内容是专门用于用户互动的内容 ⇒a，音频（如果存在控件属性），按钮，嵌入，iframe，img（如果存在usemap属性），输入（如果type属性不处于隐藏状态），keygen，label，object（如果usemap属性存在），select，textarea，video（如果存在controls属性）

因此，a不允许包含iframe等。

基本上，这个要求是为了避免出现任何可能出现的歧义，如果这些用于用户交互的元素将嵌套。

想象一个简单的表单，其中包含一个指向https://www.google.com的链接，中的该链接是表单的提交按钮。现在，当用户点击该按钮时会发生什么？它应该提交表格吗？它应该不提交表格，而是去Google吗？（两者同时是不可能的，浏览器一次只能发出一个“主要”请求。）

IE11 iFrame点击事件气泡最多会影响窗口

1 个答案: