图像点击不起作用

Image onclick not working

本文关键字：不起作用 图像      更新时间：2023-09-26

我有一个相对于背景图像设置的图像。我想在单击时调用一个函数，但我似乎遇到了一个问题。超链接似乎正常工作，但未调用该函数。这就是我的代码的样子

<img src=".."  width="100%" height="80"   id="ril_logo"/>
     <div id="logo-wrapper1">
    <img src="..."  width="5%" height="45"/>
     </div>
     <div id="logo-wrapper2">
    <a href="#">
            <img id="charger" onclick="abc();"  src=".."  width="4%" height="50" /> 
    </a>
     </div>

function abc()
{
        alert();
}

您是否 100% 确定对 abc（） 的调用不起作用？控制台日志中是否有任何错误。

您也可以考虑事件冒泡。您单击图像，它会触发其事件。然后冒泡到 href 元素，然后冒泡到下一个可用元素，依此类推。

您的代码可以更改为：

<img id="charger" onclick="abc(); return false;" src=".." width="4%" height="50" />

或

<img id="charger" onclick="return abc();" src=".." width="4%" height="50" />
function abc() { ... return false; }

这将防止事件冒泡比 img onclick 函数更进一步。

由于您的img位于a标签内，因此单击图像将导致单击a，因此您会看到超链接正常工作。

如果你把onclick放在a它会触发函数调用。

试试这个，src="imagepath"添加你的图像路径

<img src=".." width="100%" height="80" id="ril_logo" />
<div id="logo-wrapper1">
    <img src="..." width="5%" height="45" />
</div>
<div id="logo-wrapper2">
    <a href="#">
        <img id="charger" onclick="abc();" src=".." width="4%" height="50" />
    </a>
</div>
<script type="text/javascript">
    function abc() {
        alert();
    }
</script>

只需在脚本标签中添加您的function abc()即可

<script type="text/javascript">
    function abc() {
        alert("Success");
    }
</script>
相关文章：