如何在点击时防止jQuery mouseenter/mouseleave事件

Question

我有一种感觉，我可能会用完全错误的方式去做这件事......希望有人能帮助我。

我为我的应用程序开发了一个星级评分系统。

下面是代码我到目前为止其执行以下操作：

单个星显示具有多个在其内部，其从经由JSON数据库中检索。当你将鼠标悬停在这颗单星上时，10颗星会消失。当你点击它，然后初始化“投票”模式和mouseenter，mouseleave事件处理程序被赋予单个星星。然后，当你点击一个星星时，一个更新数据库的ajax帖子将被替换为数字星形中的数字（平均得票分数），并将相关类别添加到相关的星星数量中，以便可以直观地呈现星级评分为这个项目。这一切工作正常。

问题： -

目前，当你点击一次进入“票”模式，然后悬停在星星（如你的MouseEnter它增加了亮点类），然后单击以实际投票原来的mouseenter /鼠标离开事件处理程序仍然活在个人明星身上。

我想添加/删除悬停后的类停止一旦用户投票。

我敢肯定，答案是使用event.stopPropagation通过解除处理程序本身与.off（）的绑定，但我似乎无法使其工作。

任何想法？

//show ratings on hover 
$('#full-width-layout_c1_col-1-1_1').on('mouseenter mouseleave click', 
             '.rate', 
             function (e) { 

    $ratings = $(this).parent().find('.ratings_stars'); 

    if (e.type == 'mouseenter') { 
    $ratings.fadeIn(); 
    } 

    if (e.type == 'mouseleave') { 
    $ratings.fadeOut(); 
    } 

    if (e.type == 'click') { 

    $('#full-width-layout_c1_col-1-1_1').on('mouseenter mouseleave click', 
              '.ratings_stars', 
              function (e) { 

     var $vote = $(this).parent().find('.vote_info').text(); 
     var $hover = $(this).prevAll().andSelf(); 
     var $original = $(this).parent() 
          .find('.star_' + $vote) 
          .prevAll() 
          .andSelf(); 

     if (e.type == 'mouseenter') { 
     $hover.addClass('ratings_over'); 
     $(this).nextAll().removeClass('ratings_vote'); 
     } 

     if (e.type == 'mouseleave') { 
     $hover.andSelf().removeClass('ratings_over'); 
     $original.addClass('ratings_vote'); 
     } 

     //Highlight stars on hover and insert into database on click 
     if (e.type == 'click') { 

     var $row = $(this).closest('tr').find('.songnamecolumn'); 
     var $rating = $(this).index() + 1; 
     var $songID = $(this).closest('tr') 
          .find('.songnamecolumn') 
          .attr('alt'); 

     var $userID = $('#loggedin_user_id').text(); 

     $.ajax({ 
      url: "/wp-content/ratings.php", 
      type: 'POST', 
      data: 'song_id=' 
       + $songID 
       + '&user_id=' 
       + $userID 
       + '&rating=' 
       + $rating, 
      success: function() { 
      $songid = $songID; 

      updateRating($songid, $row, $original); 
      } 
     }); 
     } 
    }); 
    } 
}); 

相关的HTML如下：

<div class="rate"> 
    <div class="star_1 ratings_stars ratings_vote" style="display: none;"> 
    </div> 
    <div class="star_2 ratings_stars ratings_vote" style="display: none;"> 
    </div> 
    <div class="star_3 ratings_stars ratings_vote" style="display: none;"> 
    </div> 
    <div class="star_4 ratings_stars ratings_vote" style="display: none;"> 
    </div> 
    <div class="star_5 ratings_stars ratings_vote" style="display: none;"> 
    </div> 
    <div class="star_6 ratings_stars" style="display: none;"> 
    </div> 
    <div class="star_7 ratings_stars" style="display: none;"> 
    </div> 
    <div class="star_8 ratings_stars" style="display: none;"> 
    </div> 
    <div class="star_9 ratings_stars" style="display: none;"> 
    </div> 
    <div class="star_10 ratings_stars" style="display: none;"> 
    </div> 
    <div class="vote_info"> 
     5 
    </div> 
</div> 

Answer 1

愚蠢，我已经找到了解决办法了。尽管希望别人可以提供更优雅的。

我简单地设置ajax onsuccess函数来向父元素添加一个'voteed'类，并使用标准的if/else来检查具有'voteed'类的父元素并使用return false;如果是这样，否则...绑定mouseenter/mouseleave/click功能。

感觉对我来说有点破绽，我确信必须有更好的方法。

如果有人能给我一个更好的解决方案，我会留下一段时间，然后将其标记为答案。

谢谢大家。

Answer 2

如果你使用Id作为选择器，你也可以使用this.off（'mouseenter'）;

文档：http://api.jquery.com/off/

我发现，它不一定工作，如果你使用的是更通用的选择，除非你也可以使用它是在。对（）命令所使用的精确选择第二个参数。

但是，如果您将始终使用唯一ID作为选择器，这应该工作。请参阅文档链接。

我正在投票答案，因为即使使用更通用的选择器，该解决方案也能正常工作。