javascript - Mousedown 事件抑制 focusout 事件？

Question

我有一个应用程序，其中有一个密码字段。当用户将鼠标悬停在眼睛图标上时，我们希望以文本形式向用户显示密码。然而，在某些情况下，焦点移出事件不会被调用。这就是代码的样子。 mousedown 事件是否抑制焦点移出事件。文本和密码的转换工作正常，但该值未绑定(bind)到模型。

$(document).on('mousedown mouseup', '.passfield', function (event) {
    togglepasswordreset(event);
});

window.togglepasswordreset = function (event) {
    var element = event.currentTarget;
    if (element) {
        if (event.type == 'mousedown') {
            $(element).parent().children('input').attr('type', 'text');
        }
        else {
            $(element).parent().children('input').attr('type', 'password');
        }
    }
};

这就是 html 的样子

<div class="field">
    <span class="controls passfield" for="showpass"><b class="icon_eye"></b></span>
     @*<input type="checkbox" value="Show password" class="passcheckbox" id="showpass" tabindex="-1" data-bind="click:onShowPass">*@
     <label for="inputEmail" class="floatLblDn">@Resources.Password</label>
     <input type="password" class="floatTxt myStyle" id="inputPassword" name="inputPassword" data-bind="value: Password">
</div>

Answer 1

我为你写了一个帮助示例。

HTML

<div>
        <input type="password" class="passfield" id="passf" />
        <label style="margin-left: -30px; background: #ffde00; cursor: pointer;"        for="#passf">See</label>
</div>

脚本

<script>
    $(function() {
        $('label').click(function(event) {
        });
        $('label').mousedown(function(event) {
            $('.passfield').attr('type', 'text');
        });
        $('label').mouseup(function(event) {
            $('.passfield').attr('type', 'password');
            $('.passfield').focus();
        }); 
    });
</script>