如何在嵌入标签上添加 onClick 事件？答案

【问题标题】：How to add onClick event on embed tag?如何在嵌入标签上添加 onClick 事件？
【发布时间】：2022-01-02 16:34:08
【问题描述】：

我想在嵌入标签上添加 onclick 事件，但问题是，它在 chrome 上不起作用，并且处理程序不起作用。除了 onclick 事件 mouseover 和 mouseleave 正在工作。这里是代码 HTML

<embed src="http://localhost/credit-app1/" onclick="increaseSize()" onload="bottomRight()">

JAVASCRIPT

function increaseSize(){
    var embedtag = document.querySelector("embed");
    if(embedtag.style.width == "400px"){
        embedtag.style.width = "100px";
        embedtag.style.height = "100px";
    }else{
        embedtag.style.width = "400px";
        embedtag.style.height = "500px"; 
    }
    console.log(embedtag)
}

【问题讨论】：

可能是因为你点击的embed的内容没有你的点击事件。
@Lain 当您将代码提供给包装器 div 时，该代码可以工作，但并不完美。我想知道我们可以做些什么来解决这个问题。
我刚刚将嵌入标签的 src 更改为 src="img.icons8.com/color/40/000000/mastercard.png" 它工作得非常好但是当我给我的应用程序的 src="localhost/credit-app1" 它不工作我想知道为什么@Erenn

标签： javascript html onclick embed-tag

【解决方案1】：

您可以使用悬停效果使用纯 CSS 来实现：

embed:hover {
  transform: scale(2.5);
}

我不确定它应该如何与onclick() 一起工作，因为里面的内容永远不会有点击事件...

或：

您可以尝试在嵌入的内容上放置一个透明的<div>：

<div style="height: 100px; width: 100px; position: absolute; top: 0; background-color: transparent;" onclick="increaseSize()"></div>
<embed src="http://localhost/credit-app1/" onload="bottomRight()" style="position: relative;">

在 JavaScript 中，您也需要调整 div 的大小。

【讨论】：