jquery - 内联编辑: onBlur prevents onClick from being triggered (jQuery)

Question

StackOverflow 社区您好!

我目前正在开发自己的用于内联编辑的 jQuery 插件，因为现有的插件不符合我的需求。

无论如何，我想为用户提供以下有关编辑工作方式的( bool )选项:

• 提交按钮
• 模糊重置

假设用户想要一个提交按钮 (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

将提交绑定(bind)到mousedown/keydown事件而不是click；它们都在模糊之前触发。如果需要，您可以使用 unbind 取消或取消模糊事件。 ，或类检查等。

编辑:不幸的是，如果您按 Tab 键到按钮，这将不起作用，因此这可能不是理想的方式...