jQuery touchstart 不适用于模糊

Question

我这里的问题是touchstart 。 当您单击另一个焦点输入时，发生了什么而不是像单击一样，它会将所需的 class 添加到页脚。 Touchstart没有。 相反，它似乎对模糊反应迅速，然后模糊发生。

任何人都知道如何阻止这种情况，因此touchstart行为就像点击一样？

 $('input:not(:radio)').on('click touchstart', function (e) { if(e.type==='click'){}else{ $('footer').addClass('touched'); } }).on('blur', function () { $('.touched').removeClass('touched'); });

 footer{background:blue;display:block;height:50px;} footer.touched{background:red}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text"> <input type="text"> <footer>footer</footer>

Answer 1

因此，想出了一种方法来使其工作并消除页脚动画在输入焦点之间的任何痛苦闪烁”。

 $('input:not(:radio)').on('click touchstart', function (e) { if(e.type==='click'){}else{ $('#form-footer').hide(); setTimeout(function(){ $('#form-footer').addClass('touched').show(); }, 400); } }).on('blur', function () { $('.touched').removeClass('touched'); }); 

Answer 2

我遇到了类似的问题，试图让 Bootstrap 5 按钮在鼠标点击和使用触摸屏之间发挥相同的作用。

我所需的原因和影响如下：

我使用相同的按钮将变量从真更改为假，然后再次按下相同的按钮，它会将变量从假恢复为真。 所以本质上，我使用一个按钮来锁定，然后再次按下它，它就会关闭。

在下面的代码示例中，我根据按钮设置的模式更改按钮的样式。

HTML：

<button class="btn btn-outline-secondary ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Draw Connector" id="drawConnectorModeButton" data-bs-animation="false">
    <i class="fa-solid fa-highlighter-line fa-lg"></i>
</button>

JavaScript：

// Remove the blur from the bootsrtap buttons once released.
$(".btn").mouseup(function () {
    $(this).blur();
})

var drawConnectorModeActive = false;

$('#drawConnectorModeButton').on('click touchend', function (e) {
    e.preventDefault();
    $('#drawConnectorModeButton').tooltip('hide');
    if (drawConnectorModeActive == true) { // Off
        $('#drawConnectorModeButton').removeClass('btn-secondary').addClass('btn-outline-secondary');
        drawConnectorModeActive = false;
    } else { // On
        $(this).blur();
        $('#drawConnectorModeButton').removeClass('btn-outline-secondary').addClass('btn-secondary');
        drawConnectorModeActive = true;
    }
});