在“鼠标按下”时处理“鼠标离开”

Question

我创建了一个带有独特边框样式的 div 的自定义按钮。我正在尝试处理“鼠标按下”以切换边框颜色以产生缩进的错觉。然后处理“mouseup”以切换回默认值。

问题是当鼠标离开按钮并且“mouseup”被触发时，它不再由 div 处理。我尝试拦截“mouseleave”，我尝试添加点击时的数据属性（不会更新），我尝试添加一个名为“imclicked”的带有 .addClass 的临时类（无法让它工作） .

我真的很挣扎。

到目前为止，这是我的代码：

function ToggleBorder() {
    // Get Border Colours
    //-----------------------------------
    var top    = $(this).css("borderTopColor"),
        right  = $(this).css("borderRightColor"),
        bottom = $(this).css("borderBottomColor"),
        left   = $(this).css("borderLeftColor");

    // Assign new Colours
    //-----------------------------------
    $(this).css("borderTopColor", bottom);
    $(this).css("borderLeftColor", right);
    $(this).css("borderBottomColor", top);
    $(this).css("borderRightColor", left);
}

$(".main-nav-button").mousedown(ToggleBorder);

$(".main-nav-button").mouseup(ToggleBorder);

$(".main-nav-button").mouseleave(function() {
    // test for mousedown
});

我该怎么做才能切换回 mouseleave 的默认边框？

Answer 1

我会在这个上使用addClass()/方法。removeClass()

首先，定义“默认”类和“活动”类：

.main-nav-button {
    border: 1px solid red;
    border-color: red blue green yellow;
}
.main-nav-button.active {
    border-color: green yellow red blue;
}

然后在 上添加此类mousedown()，并在 上删除它mouseup()。请注意，我还添加了mouseout(). 当您用鼠标离开 div 时（当 mousedown 处于活动状态时），它将删除该类。

$(function(){
    $(".main-nav-button")
    .mouseup(function() { $(this).removeClass('active'); })
    .mouseout(function() { $(this).removeClass('active'); })
    .mousedown(function() { $(this).addClass('active'); });
});

演示版

.main-nav-button {
    border: 1px solid red;
    border-color: red blue green yellow;
}
.main-nav-button.active {
    border-color: green yellow red blue;
}

$(function(){
    $(".main-nav-button")
    .mouseup(function() { $(this).removeClass('active'); })
    .mouseout(function() { $(this).removeClass('active'); })
    .mousedown(function() { $(this).addClass('active'); });
});

$(function(){
    $(".main-nav-button")
    .mouseup(function() { $(this).removeClass('active'); })
    .mouseout(function() { $(this).removeClass('active'); })
    .mousedown(function() { $(this).addClass('active'); });
});

编辑

根据您的评论，使其动态化。当光标离开时，您唯一需要检查的是是否触发了 mousedown 事件。为此，我向其中添加了一个活动类。

$(function () {
    function toggle(elem) {
        var top = elem.css("borderTopColor"),
            right = elem.css("borderRightColor"),
            bottom = elem.css("borderBottomColor"),
            left = elem.css("borderLeftColor");

        elem.css("borderTopColor", bottom);
        elem.css("borderLeftColor", right);
        elem.css("borderBottomColor", top);
        elem.css("borderRightColor", left);
    }

    $(".main-nav-button")
    .mousedown(function () {
        toggle($(this));
        $(this).addClass('active');
    })
    .mouseup(function () {
        toggle($(this));
        $(this).removeClass('active');
    })
    .mouseout(function () {
        if( $(this).hasClass('active') ) {
            toggle($(this));
            $(this).removeClass('active');
        }
    });
});

.main-nav-button {
    float: left;
    padding: 1em;
    border: 5px solid red;
    border-color: red blue green yellow;
}
.main-nav-button.active {
    border-color: green yellow red blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav-button">Button</div>

$(function () {
    function toggle(elem) {
        var top = elem.css("borderTopColor"),
            right = elem.css("borderRightColor"),
            bottom = elem.css("borderBottomColor"),
            left = elem.css("borderLeftColor");

        elem.css("borderTopColor", bottom);
        elem.css("borderLeftColor", right);
        elem.css("borderBottomColor", top);
        elem.css("borderRightColor", left);
    }

    $(".main-nav-button")
    .mousedown(function () {
        toggle($(this));
        $(this).addClass('active');
    })
    .mouseup(function () {
        toggle($(this));
        $(this).removeClass('active');
    })
    .mouseout(function () {
        if( $(this).hasClass('active') ) {
            toggle($(this));
            $(this).removeClass('active');
        }
    });
});