Question

当用户鼠标悬停时，我制作了一个显示5颗星的评级系统，星星变黄，但是当用户鼠标移出时，星星会变白。

但是，我想制作一个功能，当用户点击星形时它变成黄色，即使鼠标输出也不会变回白色。我尝试使用鼠标按钮来执行此操作，但鼠标输出事件仍然出现。

<script>
function changeImage1() {
        document.getElementById('myImage1').src="yellow.jpg";}

function reset(){
document.getElementById('myImage1').src= "whitestar.jpg";}
</script>

<body>
<img id="myImage1" onmouseover="changeImage1()" onmouseout="reset()" width="150" height="150"src="whitestar.jpg">
</body>

Answer 1

为什么不用鼠标测试黄色，然后返回false？

Answer 2

<img id="myImage1" width="150" height="150">
<script>
    var img = document.getElementById('myImage1');
    img.addEventListener('mouseover', changeImage1, false);
    img.addEventListener('mouseout', reset, false);
    img.addEventListener('click', click_, false);

    function changeImage1() {
        img.src = 'yellow.jpg';
    }
    function reset() {
        img.src = 'whitestar.jpg';
    };
    function click_() {
        img.removeEventListener('mouseover', changeImage1, false);
        img.removeEventListener('mouseout', reset, false);
    };
</script>

Answer 3

您可以使用jquery点击事件处理程序

<img id="myImage" src="whitestar.jpg">

指定img元素的点击处理程序

$( "#myImage" ).click(function() {
    $(this).attr('src','yellow.jpg');

});

在没有评论的情况下编辑

<img onclick="this.src='yellow.jpg';" id="myImage" src="whitestar.jpg">

MouseEvent和Onclick

3 个答案: