Question

Hello StackOverflow社区！

我目前正在使用自己的jQuery插件进行内联编辑，因为那些已经存在的插件不符合我的需求。

无论如何，我想给用户提供以下（布尔）选项，关于编辑应该如何工作：

submit_button
reset_on_blur

假设用户希望有一个提交按钮（submit_button = true），并希望内联输入元素在失去焦点时立即被删除（reset_on_blur = true）。这导致为按钮注册了onClick处理程序，并为输入元素注册了onBlur处理程序。

然而，每次用户单击按钮时，onBlur处理程序也会被触发并导致编辑模式被保留，即在onClick事件发生之前。这使提交变得不可能。

仅供参考，编辑模式下的HTML如下所示：

<td><input type="text" class="ie-input" value="Current value" /><div class="ie-content-backup" style="display: none;">Backup Value</div><input type="submit" class="ie-button-submit" value="Save" /></td>

那么，如果在激活提交按钮时焦点丢失，我是否有办法检查onBlur处理程序，以便在触发提交按钮的onClick事件之前不会保留编辑模式？

我还尝试注册一个$（'body'）。click（）处理程序来模拟模糊，并能够追溯到哪个元素被点击，但这也没有用，导致相当奇怪错误：

$('html').click(function(e) { // body doesn't span over full page height, use html instead

 // Don't reset if the submit button, the input element itself or the element to be edited inline was clicked.
 if(!$(e.target).hasClass('ie-button-submit') && !$(e.target).hasClass('ie-input') && $(e.target).get(0) != element.get(0)) {  
  cancel(element);
 }
});

jEditable使用以下代码。但是，由于延迟，我不喜欢这种方法。更别说我甚至不明白为什么会这样。 ;）

input.blur(function(e) {
 /* prevent canceling if submit was clicked */
 t = setTimeout(function() {
  reset.apply(form, [settings, self]);
 }, 500);
});

提前致谢！

Answer 1

将提交内容绑定到mousedown / keydown事件而不是click;他们都在blur之前开火。然后，您可以根据需要取消或取消模糊事件，使用unbind或类检查等。

编辑：如果您不幸地选中按钮，这将无效，所以它可能不是理想的方式...

Answer 2

如果您想要触发onblur和onclick，则使用onfocus而不是onClick按钮。这将首先使onblur事件触发，然后onFocus。将代码从OnClick复制到OnFocus事件，它将运行良好。

                    $(document).off('focus', '#Button1');
                    $(document).on('focus', '#Button1', function (e) {

                        // ur work.
                        }

                    });

内联编辑：onBlur阻止onClick被触发（jQuery）

2 个答案: