Mouseclick + mousemove / console.log 悬停时响应 200 次 div

Question

当您单击总 div 调用选择器并将鼠标拖到这些方块上时，我得到了一些方块，您悬停的方块将获得您使用颜色选择器选择的颜色。

现在，当您选择一种颜色并单击其中一个方块并拖动鼠标时。您将在 console.log 中看到您悬停的每个 div 响应 200 次。这会让您的网站非常卡顿。

我怎样才能让它像每次悬停 div 中的 1 个时它只响应 1 次。

Jsfiddle:
http://jsfiddle.net/DennisBetman/4o9t42b8/

步骤：
打开控制台。选择一种颜色。然后单击并拖动鼠标。

HTML:

Pick color:
<input class="getColor" type="color" name="favcolor">
<div class="selector">
    <div class="one1"></div>
    <div class="one2"></div>
    <div class="one3"></div>
    <div class="one4"></div>
    <div class="one5"></div>
    <div class="one6"></div>
    <div class="one7"></div>
    <div class="one8"></div>
    <div class="one9"></div>
    <div class="one10"></div>
    <div class="one11"></div>
    <div class="one12"></div>
    <div class="one13"></div>
    <div class="one14"></div>
    <div class="one15"></div>
    <div class="one16"></div>
    <div class="one17"></div>
    <div class="one18"></div>
    <div class="one19"></div>
    <div class="one20"></div>
    <div class="one21"></div>
    <div class="one22"></div>
    <div class="one23"></div>
    <div class="one24"></div>
    <div class="one25"></div>
    <div class="one26"></div>
    <div class="one27"></div>
    <div class="one28"></div>
    <div class="one29"></div>
    <div class="one30"></div>
    <div class="one31"></div>
    <div class="one32"></div>
    <div class="one33"></div>
    <div class="one34"></div>
    <div class="one35"></div>
    <div class="one36"></div>
    <div class="one37"></div>
    <div class="one38"></div>
    <div class="one39"></div>
    <div class="one40"></div>
</div>
<div class="rotation">
    <div class="order one1"></div>
    <div class="order one2"></div>
    <div class="order one3"></div>
    <div class="order one4"></div>
    <div class="order one5"></div>
    <div class="order one6"></div>
    <div class="order one7"></div>
    <div class="order one8"></div>
    <div class="order one9"></div>
    <div class="order one10"></div>
    <div class="order one11"></div>
    <div class="order one12"></div>
    <div class="order one13"></div>
    <div class="order one14"></div>
    <div class="order one15"></div>
    <div class="order one16"></div>
    <div class="order one17"></div>
    <div class="order one18"></div>
    <div class="order one19"></div>
    <div class="order one20"></div>
    <div class="order one21"></div>
    <div class="order one22"></div>
    <div class="order one23"></div>
    <div class="order one24"></div>
    <div class="order one25"></div>
    <div class="order one26"></div>
    <div class="order one27"></div>
    <div class="order one28"></div>
    <div class="order one29"></div>
    <div class="order one30"></div>
    <div class="order one31"></div>
    <div class="order one32"></div>
    <div class="order one33"></div>
    <div class="order one34"></div>
    <div class="order one35"></div>
    <div class="order one36"></div>
    <div class="order one37"></div>
    <div class="order one38"></div>
    <div class="order one39"></div>
    <div class="order one40"></div>
</div>
<div class="empty"></div>

jQuery:

var clicking = false;
$(".getColor").change(function () {
    var getColor = $(".getColor").val();
    var color = getColor;
    $('.selector').mousedown(function () {
        clicking = true;
        $('.clickstatus').text('mousedown');
        $(".selector > div").click(function () {
            var myClass = $(this).attr("class");
            $(".empty").text(myClass);
            var getVal = $(".empty").text();
            $("." + getVal + "").css("background", color);
            console.log(getVal);
        });
    });

    $('.selector').mouseup(function () {
        clicking = false;
    });
    $('.selector').mousemove(function () {
        if (clicking) {
            $(".selector > div").hover(function () {
                if (clicking) {
                    var myClass = $(this).attr("class");
                    $(".empty").text(myClass);
                    var getVal = $(".empty").text();
                    $("." + getVal + "").css("background", color);
                    console.log(getVal);
                }
            });
        }
    });
    $(".selector").mouseleave(function () {
        clicking = false;
    });
});

CSS:

.selector {
    width: 400px;
    background: #d3d3d3;
    cursor:crosshair;
    margin-bottom: 250px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.rotation {
    width: 400px;
    height: 100px;
    background-color: white;
}
.selector > div {
    width:40px;
    height:40px;
    border:1px solid #d3d3d3;
    background:white;
    float:left;
    box-sizing:border-box;
}
.order {
    background:yellow;
    float:left;
    width:40px;
    height: 40px;
}
.empty {
    display:none;
}

Answer 1

因为您将一些事件绑定到其他事件中（比如在 mousedown 中），所以您会一直绑定 div 单击事件。

$(".selector > div").click(function () {}

在鼠标移动中，每次鼠标移动时你也绑定悬停事件

$(".selector > div").hover(function () {

然后将所有这些绑定到颜色选择器的 'change' 事件中；

您不需要这样做，只需设置标志来跟踪您所处的状态/重要的事情，并且只需设置一次事件处理程序。

var color, clicking = false;
$(".getColor").change(function () {
  color = $(".getColor").val();
}):

$('.selector').mousedown(function () {
  clicking = true;
  $('.clickstatus').text('mousedown');
});
$('.selector').mouseup(function () {
  clicking = false;
});
$(".selector").mouseleave(function () {
  clicking = false;
});

$(".selector > div").click(function () {
  var myClass = $(this).attr("class");
  $(".empty").text(myClass);
  var getVal = $(".empty").text();
  $("." + getVal + "").css("background", color);
  console.log(getVal);
});

$(".selector > div").hover(function () {
  if (clicking) {
    var myClass = $(this).attr("class");
    $(".empty").text(myClass);
    var getVal = $(".empty").text();
    $("." + getVal + "").css("background", color);
    console.log(getVal);
  }
});

Answer 2

根据我的评论，我认为你应该重新制作你的 JS：

var clicking = false;
var color = "black";
$('.selector').mousedown(function () {
    clicking = true;
});
$('.selector').mouseup(function () {
    clicking = false;
});
$(".selector > div").click(function () {
    $("."+this.className).css("background", color);
    console.log(this.className);
});
$(".selector").mouseleave(function () {
    clicking = false;
});
$(".getColor").change(function () {
    color = $(".getColor").val();
});
$(".selector > div").on("mouseover", function () {
    if (clicking) {
        $("."+this.className).css("background", color);
        console.log(this.className);
    }
});

jsfiddle

更何况我真的不知道你为什么要这样做:

var myClass = $(this).attr("class");
$(".empty").text(myClass);
var getVal = $(".empty").text();
$("." + getVal + "").css("background", color);
console.log(getVal);

这意味着：通过jquery找到这个，这样我们就可以得到属性class，找到另一个我们可以存储这个值的元素，让我们通过再次找到那个元素来再次获得那个值，最后找到通过 classname 我们现在（再次拥有），而 className 完全可以从 this.className

访问

Mouseclick + mousemove / console.log 悬停时响应 200 次 div

Mouseclick + mousemove / console.log respond 200 times when hover a div

css

jquery

click

mousemove