Javascript 如果元素是iframe，如何捕获单击事件？

我在id为div1的div中附加了一个带有youtube嵌入url的iframe。当单击iframe时，我想做一些事情

我正在使用这个jquery代码，但它不起作用

$('#div1 iframe').bind('click', function(){
         alert('clicked on iframe');
});

---

我不确定你是否有iframe的id。但您可以尝试在iframe中捕获文档的点击平衡：

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

尽管这不能解决您的跨站点问题，仅供参考：

---

这一点我们可以将achive与jquery结合使用，也可以通过javascript实现

$('.inner iframe').bind('click', function(){
             alert('clicked on iframe');
    });

---

这里有一个解决方案是vanilla JS，它为我解决了一个类似的问题，如果单击了iFrame，我需要关闭父级上的一些下拉列表

  public static iFrameClickHandler = {
        iFrame: undefined,
        mouseOverIframe: false,
        mouseOver: function() {
            this.mouseOverIframe = true;
        },
        mouseLeave: function() {
            this.mouseOverIframe = false;
            window.focus();
        },
        windowBlur: function() {
            if (this.mouseOverIframe) this.fireClickEvent();
        },
        fireClickEvent: function() {
            // do what you wanna do here
        },
        init: function() {
            this.mouseOver = this.mouseOver.bind(this);
            this.mouseLeave = this.mouseLeave.bind(this);
            this.windowBlur = this.windowBlur.bind(this);
            this.iFrame = document.querySelector('class/id of your iframe wrapper');
            this.iFrame.addEventListener('mouseover', this.mouseOver);
            this.iFrame.addEventListener('mouseleave', this.mouseLeave);
            window.addEventListener('blur', this.windowBlur);
            window.focus();
        },
        destroy: function() {
            this.iFrame.removeEventListener('mouseover', this.mouseOver);
            this.iFrame.removeEventListener('mouseleave', this.mouseLeave);
            window.removeEventListener('blur', this.windowBlur);
        }
    }

---

我可以使用document.getElementsByTagName（'iframe'）而不是document.getElementById（“iframe_id”）？你可以这样做。只要记住，它将从你的页面中获取所有iframe。如果你有iframe的id，那么你可以使用jquery来简化你的任务。这段代码不起作用。document.getElementsByTagName（“iframe”）正在选择元素，但document.getElementsByTagName（“iframe”）.contentWindow未定义。

$('.inner iframe').bind('click', function(){
             alert('clicked on iframe');
    });

  public static iFrameClickHandler = {
        iFrame: undefined,
        mouseOverIframe: false,
        mouseOver: function() {
            this.mouseOverIframe = true;
        },
        mouseLeave: function() {
            this.mouseOverIframe = false;
            window.focus();
        },
        windowBlur: function() {
            if (this.mouseOverIframe) this.fireClickEvent();
        },
        fireClickEvent: function() {
            // do what you wanna do here
        },
        init: function() {
            this.mouseOver = this.mouseOver.bind(this);
            this.mouseLeave = this.mouseLeave.bind(this);
            this.windowBlur = this.windowBlur.bind(this);
            this.iFrame = document.querySelector('class/id of your iframe wrapper');
            this.iFrame.addEventListener('mouseover', this.mouseOver);
            this.iFrame.addEventListener('mouseleave', this.mouseLeave);
            window.addEventListener('blur', this.windowBlur);
            window.focus();
        },
        destroy: function() {
            this.iFrame.removeEventListener('mouseover', this.mouseOver);
            this.iFrame.removeEventListener('mouseleave', this.mouseLeave);
            window.removeEventListener('blur', this.windowBlur);
        }
    }