我有一个 Netflix/Amazon 风格的星级评级系统。因此,星星会在鼠标悬停时暂时亮起,并且单击应该会触发 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;
}
}
最佳答案
每当我需要在鼠标悬停时改变显示时,我通常更喜欢使用 CSS element:hover。
关于php - Javascript:onClick 事件需要两次单击 onMouseOver 处理程序的 b/c,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1320334/