javascript - Javascript：onclick和一些拖拽的东西生了孩子？

Question

这是我正在处理的页面：http: //kylemorgan49.com/sb/gridster/

当您将鼠标悬停在一个框上时，背景会更改颜色（来自 css :hover），当您单击 javascript 时会将颜色更改为红色。所以玩了这个之后，你可以想象它可以用作绘图应用程序。那么，当您单击并拖动多个框时，我如何让它改变颜色呢？这样您就不必单击每个框。谢谢！哦，您可以通过右键单击并单击查看源代码来查看代码（仅供参考）

Answer 1

1. 在网格上绑定 mousedown 事件以设置“点击”标志
2. 在每个网格方块上绑定一个 mouseenter 事件。如果鼠标进入并且“点击”为真，则为其着色
3. 在网格上绑定 mouseup 事件以清除“clicking”标志

例如

var clicking = false;

// the user is holding the mouse button down, so we want to draw as they move over squares
$('#grid').mousedown(function(e) {
    clicking = true;

// the user has released the mouse, we don't want to draw anymore
}).mouseup(function(e) {
    clicking = false;
});

// when the user hovers a box, check if the user is holding down the mouse and drawing
$('#grid .box').mouseenter(function(e) {
    if (clicking) {
        $(this).addClass('colour');
    }
});

Answer 2

您可以使用 mousedown 和 mouseup 来跟踪鼠标按钮。设置一个变量，比如var mouseButton = true;在 mousedown 上。您还需要您的盒子的鼠标悬停事件。当 mouseover 被触发时，检查 mouseButton 的值。如果是真的，改变盒子的颜色。