基本上,我要实现的是具有活动状态的可点击图像。
单击该图像时,应该会发生某些事情,并且在按下该按钮(活动)时,它应该显示另一幅图像。
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块来解决此问题,如下所示:
#scrollbox-table-nav-softer:active .elementActive{
content: url("../img/button_softer_active.png");
}
我不知道如何或为什么...但是它现在按预期工作。如果有人可以向我解释这一点,我将不胜感激。
最佳答案
快速解决:
您需要在onmouseup和onmousedown事件上更改image src:
<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/
关于javascript - 在img上设置:active时,onClick在第二次Click上调用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42766123/