MouseEvent and Onclick

MouseEvent and Onclick

本文关键字：Onclick and MouseEvent      更新时间：2023-09-26

我制作了一个评级系统，当用户将鼠标移到上面时，星星变成黄色，当用户将鼠标移出时，星星变成白色。

然而，我想做一个功能，当用户点击星号，它变成黄色，永远不会变成白色，即使当鼠标离开。我尝试使用鼠标向下操作，但是鼠标离开事件仍然出现。

<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>

为什么不在鼠标中测试黄色，然后返回false?

<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>

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

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

为img元素分配点击处理程序

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

编辑不使用JQUERY

<img onclick="this.src='yellow.jpg';" id="myImage" src="whitestar.jpg">
相关文章：