Question

我有一个Netflix /亚马逊风格的星级评分系统。因此，星星会暂时点亮onMouseOver，点击一下就会触发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。

Javascript：onClick事件需要两次点击b / c onMouseOver处理程序

2 个答案: