如何在 contenteditable div 中使用 preventDefault？答案

【问题标题】：How to use preventDefault in contenteditable divs?如何在 contenteditable div 中使用 preventDefault？
【发布时间】：2013-04-30 01:56:09
【问题描述】：

This is an example on CodePen.

下面是代码：

HTML：

<div contenteditable="true" id="mydiv"></div>

jQuery:

$(function () {
  $("#mydiv").keydown(function (evt) {
    if (evt.which == 13) {
      evt.preventDefault();
      alert('event fired');  
    }
  });
});

为什么evt.preventDefault() 方法不起作用？

【问题讨论】：

标签： javascript jquery html contenteditable preventdefault

【解决方案1】：

preventDefault 调用只是阻止默认事件处理程序运行。如果您想跳过 evt.preventDefault() 之后的任何代码，请在其后添加 return false。

$(function () {
    $("#mydiv").keydown(function (evt) {
        if (evt.which == 13) {
            return false; // <-- now event doesn't bubble up and alert doesn't run
            alert('event fired');  
        }
    });
});

另外，正如squint所说，你可以使用stopPropagation和preventDefault来达到同样的效果。

【讨论】：

但我认为使用return false 是不好的做法。
@think123 return false 相当于同时调用evt.preventDefault(); 和evt.stopPropagation();
你倒退了。 preventDefault 不会阻止事件冒泡。这就是stopPropagation 所做的。
而@clav 你不能在returning 之后真的alert...只是说。
@FabrícioMatté 只是将他的alert 留在了那里，以证明return 语句之后的所有内容都不会运行并且事件也不会冒泡。