基本上,我要实现的是具有活动状态的可点击图像。
单击该图像时,应该会发生某些事情,并且在按下该按钮(活动)时,它应该显示另一幅图像。



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/

10-12 12:39
查看更多