javascript - 管理鼠标悬停和鼠标单击事件

Question

我正在尝试做一些非常简单的事情。我有一张带有翻转的图像。单击时， onmouseout 和 onmouseover 事件将被删除，并且图像将被交换。到目前为止我已经明白了，但现在我想添加一些东西，以便当再次单击它时，一切都会返回到原始状态(再次交换图像并激活 onmouseover 和 onmouseout。

这是我到目前为止得到的代码:

<a href="#" 
            onMouseOut="MM_swapImgRestore();
            " 
            onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)" 
            onClick="
                MM_swapImage('image','','images/image-3.jpg',1); 
                this.onmouseover=null;
                this.onmouseout=null;
                     "
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>

Answer 1

对于我相当简单的解决方案，我会添加一个标志并在触发 mouseover 和 mouseout 事件之前检查它，因为它消除了附加和分离事件的不必要的负担。

即:

<script>var myFlag=true;</script>
<a href="#" 
            onMouseOut="if(myFlag === true){MM_swapImgRestore();}" 
            onMouseOver="if(myFlag === true){MM_swapImage('image','','images/image-2.jpg',1);}" 
            onClick="MM_swapImage('image','','images/image-3.jpg',1); 
                myFlag = !myFlag;"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>