Javascript: событие onClick, требующее двух кликов b / c обработчика onMouseOver

Question

У меня есть система звездных рейтингов в стиле Netflix / Amazon. Таким образом, звезды временно загораются на MouseOver, и предполагается, что щелчок вызовет вызов PHP и постоянное изменение цвета звезды.

Все работает, хотя событие onClick не запускается до второго щелчка. Похоже, что это потому, что событие onMouseOver все еще активировано, пока не встретит завершающее действие (onMouseOut или щелчок).

Я видел похожие вопросы, но не получил точных ответов.

Спасибо!

function rate(img_name,action,headlineid,userid,rating) {
        var baseurl='http://www.mysite.com/images/';
    var imgoff='atcstar3.gif';
        var imghover='atcstar.gif';
        var imgon='atcstar.gif';
    imgname=img_name;
        hid=headlineid;
var current=document.getElementById(img_name).src;
        var star=img_name.replace(hid+'-star','');


       switch (action) {
                case 'hover':
                                for (i=1;i<=star;i++) {
                                        document.getElementById(hid+'-star'+i).src=baseurl+imghover;
                               }
                        break;

                case 'click':
                        if (current!=baseurl+imgon) {
                                for (i=1;i<=star;i++) {
                                        document.getElementById(hid+'-star'+i).src=baseurl+imgon;
                                }

                                current=baseurl+imgon;

                                xmlHttp=GetXmlHttpObject()
                                if (xmlHttp==null)
                                 {
                                 alert ("Browser does not support HTTP Request")
                                 return
                                 }

                                if (getCookie("votes")=="") {
                                  setCookie("votes",hid+'-'+star,3);
                                } else {
                                        votes=getCookie("votes")
                                        votes=votes+","+hid+'-'+star
                                        setCookie("votes",votes,3);
                                }


                                var url="rate.php?";
                                url=url+"headlineid="+hid;
                                url=url+"&userid="+userid;
                                url=url+"&rating="+star;
                                url=url+"&sid="+Math.random();
                        xmlHttp.onreadystatechange=stateChangedRateStory;
                                xmlHttp.open("GET",url,true);
                                xmlHttp.send(null);
                        newrank=star;




                        } else {
                            document.getElementById(img_name).src=baseurl+imgoff;
                                current=baseurl+imgoff;
                        }
                        break;
                case 'out':

                        if (current!=baseurl+imgon || (newrank!=star && rating<star)) {
                              for (i=5;i>=rating+1;i--) {
                                        //document[hid+'-star'+i].src=baseurl+imgoff;
                                        document.getElementById(hid+'-star'+i).src=baseurl+imgoff;
                                }
                        }

                        break;
        }
}

Answer 1

Всякий раз, когда мне нужно переключить отображение при наведении мыши, я обычно предпочитаю использовать элемент CSS: hover.

Answer 2

попробуйте, чтобы событие onMouseOver вернуло true.