【问题标题】:Blur event dimiss click event in JqueryJquery中的模糊事件关闭点击事件
【发布时间】:2012-11-11 02:10:29
【问题描述】:

我有一个简单的表单,其中包含一个文本和一个像这样的提交按钮

<label>Input something </label>
<input type="text" id="TextId" value="Whatever you input,it is wrong" />
 <div id="ErrorDiv"></div>
 <input type="submit" id="SubmitButton""/>


我在文本框中附加了一个 focusout 事件,以在 ErrorDiv 处显示多行消息。
当我单击按钮提交时,文本的 onfocusout 首先执行,它使我的按钮移出其位置并且不会触发 Onclick 事件。
fiddle link
任何人都可以向我解释它是如何发生的,我该如何解决它
谢谢。

【问题讨论】:

    标签: jquery html


    【解决方案1】:

    blur 事件在 click 事件之前被触发。发生这种情况是因为释放鼠标按钮后会触发单击事件。完成这项工作的最简单方法是在 mousedown 事件而不是 click 事件上显示警报。

    例如,使用这个

        $("#SubmitButton").live("mousedown", function() {
            alert("button click!");
        });
    

    上述更改在 OS X 上的 chrome 中对我有用,但是您应该知道,在这方面有一些 controversy。更好的解决方案是重新排列您的元素,以便验证消息不会推出提交按钮。

    【讨论】:

    • 仅供参考,我有一些技巧:使用 Css 使我的按钮布局在其位置,直到点击事件发生。 jsfiddle.net/UgJL8/10
    • 这是一种有趣的方法,但是...我会避免以这种方式应用样式。它是不可维护的,这只是问题之一。我建议您尽可能更改布局,以避免问题。例如,您可以使用 jQuery 验证插件 (docs.jquery.com/Plugins/Validation) 并在表单右侧显示验证错误,或者甚至使用工具提示来显示这样的错误 (djpate.com/2010/11/16/…)。 (您必须在每个字段的“focusout”上调用 validate())
    猜你喜欢
    • 2012-03-09
    • 2011-11-14
    • 2010-11-28
    • 1970-01-01
    • 2023-03-24
    • 2011-09-17
    • 2012-05-17
    • 2011-10-19
    • 2018-04-06
    相关资源
    最近更新 更多