评价里五个小星星 鼠标经过和点击事件处理&&判断是否点击

<script>
$(function(){
            $(".score span i").mousemove(function(){

            $(this).prevAll().addClass("clicked-1");
            $(this).addClass("clicked-1");
            $(this).nextAll().removeClass("clicked-1");
 } ) ; 
    
           $(".score span i").mouseout(function(){
           $(this).siblings().removeClass("clicked-1");
           $(this).removeClass("clicked-1");        
 } ) ; 
  
     $(".score span i").click(function(){
     $(this).prevAll().addClass("clicked");
     $(this).addClass("clicked");
     $(this).nextAll().removeClass("clicked");
     
 });

});
</script>

事件顺序：

鼠标经过的样式     ----》》   鼠标点击的样式    ----》》  鼠标移出的样式

鼠标经过移除和鼠标点击用两个不同的样式控制，否则会发生冲突

.clicked{color:#f6aa17;}/* 增加样式 */
.clicked-1{color:#f6aa17;}/* 增加样式 */

 

如果用相同的样式，就判断是否发生了点击事件，如果鼠标经过之后，点击了，移出事件的样式不发生；如果鼠标经过之后，没点击，移出事件发生；

 

 

<script>

document.onclick=function(e){

var evt= e||window.event;

var tar= evt.target||evt.srcElement;

if( (tar.tagName.toLowerCase()=="input"&&tar.type=="button") || tar.tagName.toLowerCase()=="button"){

alert("你点击的是一个按钮") } }

</script>

 

<input id="button1" type="button" value="1111"/>

<input id="button2" type="button" value="2222"/>

<input id="button3" type="button" value="3333"/>

<input id="button4" type="button" value="4444"/>

 

google 浏览器版：

 

<script>

document.onclick=function()

{ var obj = event.srcElement;

if(obj.type == "button"){

alert(obj.id); }

}

</script>

 

<input id="button1" type="button" value="1111"/>

<input id="button2" type="button" value="2222"/>

<input id="button3" type="button" value="3333"/>

<input id="button4" type="button" value="4444"/>

 

<div id="parent">
    <a id="a1" href="javascript:void(0);">点我</a>
    <a id="a2" href="javascript:void(0);">点我吧</a>
    <input id="b1" type="button" value="还是点我"></input>
    <input id="b2" type="button" value="那点你吧"></input>
</div>
<script type="text/javascript">
    $("#parent*").click(function(e) {
        if (e.target == $("#a1")[0]) {
            alert("你点了链接一！");
        } else if (e.target ==
            $("#a2")[0]) {
            alert("你点了链接二！");
        } else if (e.target == $("#b1")[0]) {
            alert("你点了按钮一！");
        } else if (e.target ==
            $("#b2")[0]) {
            alert("你点了按钮二！");
        }
    });
</script>

如果鼠标点击了，鼠标移出的样式就不发生，暂时，代码没解决