onchange 请求期间 DOM 操作（blockUI 或alert()）出现问题 - 阻止其他事件触发

发布于 2024-08-31 13:06:10 字数 1817 浏览 5 评论 0原文

编辑：我错误地认为这是由blockUI();引起的，我使用Firebug的console.log来记录消息，但对于这里的例子我更改为警报，这样您就不需要萤火虫来复制。当我再次测试它时，我能够删除 blockUI 并且 onclick 没有触发。问题似乎是每当 DOM 发生更改或反馈时，它都会阻止 onclick 触发。

我遇到了 ~~jQuery blockUI 插件~~ 的问题，并触发了两个不相关的事件（我认为，除非我丢失了它）。

基本上我有一些文本框，其中绑定了 onchange 事件。该事件负责阻止 UI、执行 ajax 调用并在成功时解除对 UI 的阻止。 ajax 正在将文本保存在内存中。另一个控件是一个带有 onclick 事件的按钮，它也会阻止 UI，触发 ajax 请求，将内存中的内容保存到数据库，并在成功时解锁 UI。

这两个单独工作都很好。当我通过单击按钮触发 onchange 时，就会出现问题。然后，仅触发 onchange 并忽略 onclick。

我可以更改复选框中的文本，单击链接，如果 jQuery.blockUI() 存在（或警报），则单独触发 onchange 并保存从来没有打电话过。如果我删除 blockUI （或警报），这两个函数都会被调用。

这是一个完整的工作示例，您可以在其中看到问题。请注意，当我尝试模拟 ajax 延迟时，setTimeout 就在那里，但如果没有它，问题就会发生。

要复制，请在文本框中键入内容，然后单击“保存”。两个事件都应该被触发，但只有 onchange 被触发。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            //$.blockUI();
            alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }
    
    </script>
</head>

<body>
    <input id="textbox" type="text" onchange="doSomething();">
    <a id="link" href="#"onclick="save()">save</a>
</body>
</html>

原文

EDIT: I wrongly assumed this was caused by blockUI(); I was using Firebug's console.log to log the message but for the example here I changed to alert so you wouldn't need firebug to replicate. Once I tested it again, I was able to remove blockUI and the onclick didn't fire not firing. The issue seems to be whenever the DOM is changing or feedback given it stop the onclick from firing.

I am having issues with ~~jQuery blockUI plugins~~ and firing two events that are (I think, unless I am losing it) unrelated.

Basically I have textboxes with onchange events bound to them. The event is responsible for blocking the UI, doing the ajax call and on success unblocking the UI. The ajax is saving the text in memory. The other control is a button with on onclick event which also block the UI, fire an ajax request saving what's in memory to the database and on success unblock the UI.

Both of these work fine separately. The issue arise when I trigger the onchange by clicking on the button. Then only the onchange is fired and the onclick is ignored.

I can change the text in the checkbox, click on the link and IF jQuery.blockUI() is present (or an alert) the onchange alone is fired and the save is never called. If I remove the blockUI (or an alert) both function are called.

Here's a fully working example where you can see the issue. Please note the setTimeout are there when I was trying to simulate the ajax delay but the issue is happening without it.

To replicate type something in the textbox and click save. Both event should be firing but only the onchange is triggered.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            //$.blockUI();
            alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }
    
    </script>
</head>

<body>
    <input id="textbox" type="text" onchange="doSomething();">
    <a id="link" href="#"onclick="save()">save</a>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

要走干脆点 2024-09-07 13:06:11

在单个页面的环境中，在任何给定时间只会发生一个事件循环。如果您的 ajax 调用是同步的，那么当处理一个事件时，这就是所有发生的事情。如果浏览器要触发另一个事件循环，那么它就不是单线程的。但它是，所以它不是。

回复收藏 0 原文

余厌 2024-09-07 13:06:11

以下使用链接的 onfocus 来“修复它”并触发该事件。而 onclick 则不然。

这项工作：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onfocus="save()">save</a>
</body>
</html>

这不行，唯一的不同是 onclick 在 onchange 之前不会触发。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onclick="save()">save</a>
</body>
</html>

The following "fixed it" using onfocus for the link and the event is triggered. With an onclick it isn't.

This work:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onfocus="save()">save</a>
</body>
</html>

This doesn't, the only different is the onclick which isn't firing when the onchange precedes it.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onclick="save()">save</a>
</body>
</html>

回复收藏 0 原文

~没有更多了~