在 mousedown 上开始悬停并在 mouseup 上停止

Question

我有一个 <section>，里面有一些 <div>，我需要多选它们。

使用下面的脚本，我可以单击以开始选择，但如果我松开鼠标，悬停效果将保持不变。

如何在 mousedown 开始 hover 并在 mouseup 停止？

我的代码在这里：

var inside = $(".grid");
var button = $(".grid>div");

inside.mousedown(function() {
    button.hover(function() {
      var attribut = $(this).attr("class");
      if (attribut == null) {
        $(this).addClass('check');
        $(this).css({
          "background": "green"
        });
      }
    });
  })
  .mouseup(function() {
    inside.off("mousedown");
  });

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.grid {
  display: flex;
  background-color: red;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 400px;
  width: 400px;
}
.grid>div {
  display: flex;
  margin: 5px;
  height: 50px;
  width: 50px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Voulez vous continuez ?</h1>
  <section class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

Answer 1

根据 this question and the API documentation，要删除 hover 事件，您应该使用：

$('#myItem').off('mouseenter mouseleave')

var inside = $(".grid");
var button = $(".grid>div");

inside.mousedown(function() {
  button.hover(function() {
    var attribut = $(this).attr("class");
    if (attribut == null) {
      $(this).addClass('check');
      $(this).css({
        "background": "green"
      });
    }
  });
});

inside.mouseup(function() {
  button.off("mouseenter mouseleave");
});

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.grid {
  display: flex;
  background-color: red;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 400px;
  width: 400px;
}
.grid>div {
  display: flex;
  margin: 5px;
  height: 50px;
  width: 50px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Voulez vous continuez ?</h1>
  <section class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

Answer 2

你可以在我的例子中使用一个标志变量 mouse_down 和 mousemove 这样你就可以在用户移动它时检查鼠标的状态如果它被点击所以给 div 着色否则什么都不做，检查下面的例子。

var inside = $(".grid"); 
var button = $(".grid>div");

var mouse_down=false;

inside.mousedown(function(e){
    mouse_down=true;
})
.mouseup(function(){
    mouse_down=false;
})
.mousemove(function(e){
    if(mouse_down){
        var target = $(e.target);
      
        if (target.is("div")) {
            target.addClass('check');
            target.css({
                "background":"green"
            });
        }
    }
});

body{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.grid{
  display: flex;
  background-color: red;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 400px;
  width: 400px;
}

.grid>div{
  display: flex;
  margin:5px;
  height: 50px;
  width:50px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Voulez vous continuez ?</h1>
  <section class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>   
    <div></div>
    <div></div>
    <div></div>
    <div></div>   
    <div></div>
    <div></div>
    <div></div>
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

在 mousedown 上开始悬停并在 mouseup 上停止

Start hover on mousedown and stop on mouseup

javascript

jquery

mouseevent