1

编辑：我错误地认为这是由于blockUI();我使用 Firebugconsole.log记录消息造成的，但对于此处的示例，我更改为 alert，因此您不需要 firebug 进行复制。一旦我再次测试它，我就能够移除blockUI并且onclick没有开火没有开火。问题似乎在于 DOM 正在更改或反馈，因为它会停止onclick触发。

我在使用jQuery blockUI 插件时遇到问题，并且触发了两个无关的事件（我认为，除非我丢失它）。

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

这两个单独工作都很好。当我onchange通过单击按钮触发时出现问题。然后只有onchange被触发而onclick被忽略。

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

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

要复制在文本框中键入内容，然后单击保存。两个事件都应该被触发，但只有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>
4

2 回答 2

0

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

于 2010-05-06T19:18:34.603 回答
0

以下使用 onfocus 链接“修复它”并触发事件。通过点击它不是。

这项工作：

<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>
于 2010-05-06T19:51:33.677 回答