提问
SAPUI5 JavaScript sap.m.input sap.m.button

UI5 sap.m.Input更改事件在某些浏览器中会干扰sap.m.Button按下事件

2020-09-03 22:02发布

站内问答 / UI5
2420 5 6

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


如果 sap.m.Input字段的值已更改，则只要焦点离开该字段，就会触发 change 事件。 焦点离开该字段的一种方式是，如果用户单击 sap.m.Button 控件。 在这种情况下，我希望 Button 上的 press 事件与 Input 字段 change 事件一起触发（ 如果"输入"字段中的值已更改）。

这正是我在Firefox [60.8.0esr（32位）]中看到的内容。 change 事件在 press 事件之前触发。

在Chrome [76.0.3809.100（正式版本）（64位）中，如果更改了 Input 字段值，则总是抑制（或阻止） press 事件 紧接之前。 换句话说，当我单击 Button 时，会看到 press 事件，但前提是还没有触发 change 事件。 如果第二次单击 Button 按钮，则会触发两次 press 事件。

在Edge [42.17134.1.0]中，我再次看到了不同的行为。 如果触发 change 事件，则会阻止 press 事件，但是当我再次单击 Button 时，我会收到 press 事件 一次（不是两次）。 请注意，这是Edge的发行版本，而不是新的Chromium驱动版本。

我创建了一个小提琴来演示此问题：

https://jsfiddle.net/mikeedoyle/1c2yhtez/

要测试，请在第一个输入字段中输入一个值。 将光标移到下一个输入字段。 在该字段中输入一个值，然后单击按钮。 再次单击该按钮。

我已明确放置UI5版本，以便轻松更改。 我在许多不同的版本中看到相同的行为。 它看起来像不是一个新错误。

我的问题看起来很像这个Stack Overflow帖子，没有引起太多关注：

更改事件会阻止其他事件触发

其他任何人以前都看过此问题吗？ 我已经使用UI5超过4年了，而且从未遇到过类似的问题。 我应该在Open UI5 Github页面上打开问题吗？

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


如果 sap.m.Input字段的值已更改，则只要焦点离开该字段，就会触发 change 事件。 焦点离开该字段的一种方式是，如果用户单击 sap.m.Button 控件。 在这种情况下，我希望 Button 上的 press 事件与 Input 字段 change 事件一起触发（ 如果"输入"字段中的值已更改）。

这正是我在Firefox [60.8.0esr（32位）]中看到的内容。 change 事件在 press 事件之前触发。

在Chrome [76.0.3809.100（正式版本）（64位）中，如果更改了 Input 字段值，则总是抑制（或阻止） press 事件 紧接之前。 换句话说，当我单击 Button 时，会看到 press 事件，但前提是还没有触发 change 事件。 如果第二次单击 Button 按钮，则会触发两次 press 事件。

在Edge [42.17134.1.0]中，我再次看到了不同的行为。 如果触发 change 事件，则会阻止 press 事件，但是当我再次单击 Button 时，我会收到 press 事件 一次（不是两次）。 请注意，这是Edge的发行版本，而不是新的Chromium驱动版本。

我创建了一个小提琴来演示此问题：

https://jsfiddle.net/mikeedoyle/1c2yhtez/

要测试，请在第一个输入字段中输入一个值。 将光标移到下一个输入字段。 在该字段中输入一个值，然后单击按钮。 再次单击该按钮。

我已明确放置UI5版本，以便轻松更改。 我在许多不同的版本中看到相同的行为。 它看起来像不是一个新错误。

我的问题看起来很像这个Stack Overflow帖子，没有引起太多关注：

更改事件会阻止其他事件触发

其他任何人以前都看过此问题吗？ 我已经使用UI5超过4年了，而且从未遇到过类似的问题。 我应该在Open UI5 Github页面上打开问题吗？

付费偷看设置
发送
5条回答
浮生未央
1楼 · 2020-09-03 22:36.采纳回答

嗨，迈克，

您检测到一些引起很多头痛的东西。 对于您检测到的漏洞，我从来没有找到任何完美的解释，但是我们发现使用不同浏览器的行为却很不一样，这很丑陋。 首先，我在这里写了一个答案，但是答案太长了。 所以我写了一个博客来回答您的问题。

在您的特定情况/示例中，使用

 fieldChanged：function（）{
     console.log（'fieldChanged'）;
 }

代替

 fieldChanged：function（）{
     alert（'fieldChanged'）;
 }

您不应再遇到此问题-我知道这不是解决方案/解决方法，但是您提到这对您不起作用，但对我却不起作用。 使用模式和阻止警报将"吞噬"按钮的按下事件（在它被点击的幕后）。 实际上，您观察到的行为是一个普遍的挑战。 有关详细信息，请参见我的博客。

干杯，纳比

SC_Yao
2楼-- · 2020-09-03 22:38

我做了更多调查，发现了这个stackoverflow帖子：

onclick事件在onchange事件之后未触发

这似乎描述了相同的行为。 恕我直言，有关警报的评论并不完全正确。 即使没有任何警报，我也会看到相同的行为。

我确实使用一种答案中建议的 mousedown DOM事件设法找到一种解决方法。

我从按钮和输入字段中删除了UI5事件处理程序，然后改用JavaScrip t addEventListener 函数。 现在，当我更改输入值并立即单击按钮时，将同时调用两个处理程序。 首先调用 mousedown 事件。

请注意，仅恢复输入字段的UI5事件处理就可以使我回到以前的行为。 看来，要使其正常工作，我们必须仅对输入字段和按钮使用本机处理程序

我仍然感到困惑，为什么Chrome团队尚未解决此问题-至少已有6年历史了。 我还想知道是否可以在UI5中做任何事情来减轻它。

三十六小时_GS
3楼-- · 2020-09-03 22:28

嗨，

有一个不带ui5的示例，表明问题出在警报中。 它劫持了焦点，因此单击永远不会发生在按钮上。

原生HTML标记：

在没有警报的情况下处理mousedown事件（在您的情况下为input.change事件），它将起作用。

此致

Alexander Ivanov（UI5）

奄奄一息的小鱼
5楼-- · 2020-09-03 22:34

对不起，

看来您找到了答案。 我认为我们无能为力，因为我们已经处理了浏览器事件，为您提供sap.m.Button的press语义事件。 按下鼠标毕竟不是完全按下。

此致

亚历山大·伊万诺夫（UI5）

一周热门 更多>

点击此处---> EasySAP.com 一起学习S4 HANA ...