请教一下onclick和onmouseout的冲突怎么解决？

一个打分的东西，鼠标放上去显示几★，鼠标离开又全变成☆，鼠标点击后点了几颗星就是几颗星。但是不知道怎么控制让click后不再触发onmouseout的状态
<head>
    <title>评分系统</title>
    <script type="text/javascript">
        function IndexOf(arr, element) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }
            }
            return -1;
        }
        function InitEvent() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            for (var i = 0; i < tds.length; i++) {
                var td = tds[i];
                td.onclick = ToOnClick;
                td.onmouseover = ToMoveOver;
                td.onmouseout = ToMoveOut;
                td.style.cursor = "pointer";
            }
        }
        function ToOnClick() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            var index = IndexOf(tds, this);
            for (var i = 0; i <= index; i++) {
                tds[i].innerText = "★";
            }
            for (var i = index + 1; i < tds.length; i++) {
                tds[i].innerText = "☆";
            }
        }
        function ToMoveOver() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            var index = IndexOf(tds, this);
            for (var i = 0; i <= index; i++) {
                tds[i].innerText = "★";
            }
            for (var i = index + 1; i < tds.length; i++) {
                tds[i].innerText = "☆";
            }
        }
        function ToMoveOut() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            for (var i = 0; i < tds.length; i++) {
                tds[i].innerText = "☆";
            }
        }
    </script>
</head>
<body onload="InitEvent()">
<table id="tableRating">
    <tr>
        <td>☆</td>
        <td>☆</td>
        <td>☆</td>
        <td>☆</td>
        <td>☆</td>
    </tr>
</table></body></html>

解决方案 »

  1.   

    页面已将生成的状态下 click后删除mouseover的事件页面正在生成的时候 根据点击的状态 设置 click和mouseover事件
      

  2.   


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <style type="text/css">
           *
           {
            font-size:25px;
            }
            td{ width:15px; height:15px;}
        </style>
        <script type="text/javascript">
           function myclick(obj)
           {
             if(obj.id=="unselect")
             {
               obj.innerText="★";
               obj.id="selected";
             }
             else
             {
               obj.innerText="☆";
               obj.id="unselect";
             }
           }
           function moseOver(obj)
           {
               if(obj.innerText=="☆")
               {
                   obj.innerText="★";
               }
           }
           function moseOut(obj)
           {
               if(obj.innerText=="★" && obj.id=="unselect")
               {
                   obj.innerText="☆";
               }
           }
        </script>
    </head>
    <body>
        <div>
            <table>
               <tr>
                  <td id="unselect" style="cursor:pointer;" onclick="myclick(this)" onmouseover="moseOver(this)" onmouseout="moseOut(this)">☆</td>
                  <td id="unselect" style="cursor:pointer;" onclick="myclick(this)" onmouseover="moseOver(this)" onmouseout="moseOut(this)">☆</td>
                  <td id="unselect" style="cursor:pointer;" onclick="myclick(this)" onmouseover="moseOver(this)" onmouseout="moseOut(this)">☆</td>
                  <td id="unselect" style="cursor:pointer;" onclick="myclick(this)" onmouseover="moseOver(this)" onmouseout="moseOut(this)">☆</td>
                  <td id="unselect" style="cursor:pointer;" onclick="myclick(this)" onmouseover="moseOver(this)" onmouseout="moseOut(this)">☆</td>
               </tr>
            </table>
        </div>
    </body>
    </html>
      

  3.   

    页面已将生成的状态下 click后删除mouseover的事件那怎么能删除事件啊？
      

  4.   

    removeEventListener函数，具体怎么用可以查查
      

  5.   

    IE:dom节点对象.detachEvent('on+事件名',函数名);非IE：dom节点对象.removeEventListener('事件名',函数名，false);
    比如点击事件，事件名就是click,上面两个方法第一个参数的区别就是IE事件名前面要加on，非IE的不用加on