Question

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

使用下面的脚本，我可以点击开始选择，但如果我释放鼠标，则悬停效果会保留。

如何在hover上启动mousedown并在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

您可以在我的示例中使用mouse_down标记变量mousemove，这样您可以在用户移动它时检查鼠标的状态，如果它被点击，那么颜色化divs否则什么都不做，请查看下面的示例

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>

Answer 2

根据this question和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>

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

2 个答案: