jquery – 鼠标悬停,而mousedown

前端之家收集整理的这篇文章主要介绍了jquery – 鼠标悬停,而mousedown前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个大桌子,每个单元格是25×25,每个单元格里面都有一个div.每个div都有“node”类,背景颜色应用于它们.我正在编写一些jQuery代码,当鼠标按住鼠标时,会改变每个div的颜色.

我现在有它,所以它工作时,我的鼠标悬停,但我只想要它的工作,当鼠标按钮也一样.我已经尝试了许多不同的方式让它工作,但到目前为止,我没有看,下面是我当前的代码.

  1. $(document).ready(function(){
  2. $(".node").mouSEOver(function(){
  3. $(this).css({background:"#333333"});
  4. });
  5. });

解决方法

尝试这样的东西:
  1. $(document).ready(function(){
  2.  
  3. var isDown = false; // Tracks status of mouse button
  4.  
  5. $(document).mousedown(function() {
  6. isDown = true; // When mouse goes down,set isDown to true
  7. })
  8. .mouseup(function() {
  9. isDown = false; // When mouse goes up,set isDown to false
  10. });
  11.  
  12. $(".node").mouSEOver(function(){
  13. if(isDown) { // Only change css if mouse is down
  14. $(this).css({background:"#333333"});
  15. }
  16. });
  17. });

编辑:

您可能希望在.node上单独进行mousedown以进行单独的项目选择.

  1. $('.node').mousedown(function() {
  2. $(this).css({background:"#333333"});
  3. });

编辑:

这是使用bind和unbind的另一种方法.

  1. $(document).mousedown(function() {
  2. $(".node").bind('mouSEOver',function(){
  3. $(this).css({background:"#333333"});
  4. });
  5. })
  6. .mouseup(function() {
  7. $(".node").unbind('mouSEOver');
  8. });
  9.  
  10. $('.node').mousedown(function() {
  11. $(this).css({background:"#333333"});
  12. });

猜你在找的jQuery相关文章