如何在ontouchstart之前确保onblur事件

Question

Our in-house web app uses onblur to capture user input and onmouseup to act on it.我们内部的网络应用程序使用 onblur 捕获用户输入并使用 onmouseup 对其进行操作。 We had problems with the onblur event not always triggering before onclick, so I changed that to onmouseup (although, it would seem that onclick can be combined with onfocus to ensure the onblur).我们遇到了 onblur 事件并不总是在 onclick 之前触发的问题，因此我将其更改为 onmouseup（尽管似乎 onclick 可以与 onfocus 结合以确保 onblur）。

When rendering our web content on a tablet we use ontouchstart which works well, but none of the techniques I used to ensure the onblur trigger before the onmouseup work.在平板电脑上渲染我们的网页内容时，我们使用 ontouchstart 效果很好，但是我用来确保在 onmouseup 工作之前触发 onblur 的技术都没有。 I can fix the problem by adding the onblur script as part of the onmouseup, but I'd prefer not to, since the click is for a generic 'Save' action.我可以通过将 onblur 脚本添加为 onmouseup 的一部分来解决问题，但我不希望这样做，因为单击是针对通用的“保存”操作。

This code snippet works well with any of Chrome's simulated touch enabled devices.此代码段适用于任何 Chrome 的模拟触控设备。 If 'Click me' is touched right after a string input, the console log output is...如果在输入字符串后立即触摸“单击我”，则控制台日志输出为...

focus重点
ontouchstart ontouchstart
onblur模糊

Thanks for any suggestions.感谢您的任何建议。

<html>
<body>
    <div>
        <input id="input" onblur="
            console.log('onblur');
            document.getElementById('output').innerHTML = document.getElementById('input').value">
        </input>
        <div id="output">No Data</div>
        <div id="click" ontouchstart="
            document.getElementById('output').focus(console.log('focus'));
            console.log('ontouchstart'); 
            document.getElementById('output').innerHTML = 'ontouchstart' ">
            Click me
        </div>
    </div>
</body>
</html>

Answer 1

Fixed my case by using a Deferred object with when().done() The application I'm supporting makes it hard to consolidate the click and onblur scripts into one, which would have made this easy.通过使用带有 when().done() 的 Deferred 对象修复了我的情况。我支持的应用程序很难将 click 和 onblur 脚本合并为一个，这会使这很容易。 Instead I'm using a global Deferred object (with lots of utility code wrapped around it).相反，我使用的是全局 Deferred 对象（周围有很多实用程序代码）。 This way the last action of the ontouchstart happends after the onblur, as required.这样，ontouchstart 的最后一个动作就根据需要在 onblur 之后发生。

<html>
<body>
    <div>
        <input id="input" onblur="
            console.log('onblur');
            document.getElementById('output').innerHTML = document.getElementById('input').value;
            deferred.resolve('done')">
        </input>
        <div id="output">No Data</div>
        <div id="click" ontouchstart="
            console.log('ontouchstart'); 
            $.when(deferred).done(
                function() {
                    console.log('done'); 
                    document.getElementById('output').innerHTML = 'ontouchstart'})">
            Click me
        </div>
    </div>
</body>
</html>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> 

<script>
    var deferred = $.Deferred();
</script>

如何在ontouchstart之前确保onblur事件

问题描述

1 个解决方案

解决方案1
0 2022-05-30 18:06:16

如何在ontouchstart之前确保onblur事件

问题描述

1 个解决方案

解决方案1 0 2022-05-30 18:06:16

解决方案1
0 2022-05-30 18:06:16