javascript - onClick 在 :active is set on img 时调用第二个 Click

Question

基本上我想要实现的是具有事件状态的可点击图像。单击图像时应该会发生一些事情，当它被按下(事件)时它应该显示另一个图像。

document.getElementById("scrollbox-table-nav-softer").addEventListener("click", tableNavSofterOnClick);

function tableNavSofterOnClick(){
    //doStuff..
}

#scrollbox-table-nav-softer{
    max-height: 45px;
    position: absolute;
    left: 15px;
    top: 0;
    z-index: 1;
}

#scrollbox-table-nav-softer:active{
    content: url("https://www.joomlack.fr/images/demos/demo2/on-top-of-earth.jpg"); 
}

<img src="http://cdn05.branchez-vous.com/wp-content/uploads/2016/09/bge2-800x410.jpg" id="scrollbox-table-nav-softer"/>

问题是当页面加载时第一次点击该元素没有任何反应(没有调用 onClick 方法)。在第二次点击时，它按预期工作(点击时图像发生变化并执行 onClick 方法)。

是什么导致第一次点击出现故障？

编辑:我设法通过向 CSS :active block 添加一个类来解决这个问题，如下所示:

#scrollbox-table-nav-softer:active .elementActive{
    content: url("../img/button_softer_active.png"); 
}

我不知道如何或为什么......但它现在按预期工作。如果有人能向我解释这一点，我将不胜感激。

Answer 1

快速修复:您需要在 onmouseup 和 onmousedown 事件上更改图像源:

<img 

onmousedown="document.getElementById('scrollbox-table-nav-softer').src='your_image_1.jpg'"

onmouseup="document.getElementById('scrollbox-table-nav-softer').src='your_image.jpg'" 

src="your_image.jpg"  

id="scrollbox-table-nav-softer"/>

https://jsfiddle.net/xcmqkcba/1/