Mousedown事件會抑制聚焦事件嗎？

Question

我有一個其中有密碼字段的應用程序。 當用戶將鼠標懸停在眼睛Icon上時，我們希望以文本形式向用戶顯示密碼。 但是，在某些情況下，不會調用聚焦事件。 這就是代碼的樣子。 mousedown事件是否抑制聚焦事件。 文本和密碼的轉換工作正常，但該值未綁定到模型。

$(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>

Answer 2

您可以只使用mouseover和mouseout事件。

我創建了一個jsFiddle向您展示https://jsfiddle.net/uxy0def1/

只需輸入密碼，然后將鼠標懸停在文本“顯示密碼”上

html

<div class="field"> <span class="controls passfield" for="showpass"><b class="icon_eye">SHOW PASSWORD</b></span>
    <input type="password" class="floatTxt myStyle" id="inputPassword" name="inputPassword" data-bind="value: Password">
</div>

Java腳本

$(document).on('mouseover', '.passfield', function (event) {
    $(this).parent().children('input').attr('type', 'text');
});

$(document).on('mouseout', '.passfield', function (event) {
    $(this).parent().children('input').attr('type', 'password');
});

Answer 3

如果用戶將.passfield拖動到另一個元素上，則mouseup事件可能不會在.passfield上.passfield 。

如果用戶在某個元素外部單擊，拖動到該元素上並釋放按鈕，則仍將其視為mouseup事件。 在大多數用戶界面中，此操作序列不被視為按下按鈕，因此通常最好使用click事件，除非我們知道在特定情況下mouseup事件更可取。

同樣， mousedown事件可能無法按預期方式工作；

如果用戶單擊某個元素，將其拖離該元素，然后釋放按鈕，則這仍被視為鼠標按下事件。 在大多數用戶界面中，此操作序列被視為“取消”按鈕按下操作，因此通常最好使用click事件，除非我們知道在特定情況下mousedown事件更可取。

在這里，我將mousedown綁定到.passfield但是將整個文檔放在mouseup上。 更改功能，以便始終切換為文本而不是將鼠標上移恢復為密碼並將鼠標下移設置為文本。

Answer 4

如果要在將鼠標懸停在某個元素上時顯示密碼，而在離開時隱藏它，則可以使用mouseover和mouseout事件。