HTML contenteditable在标签时有效，但在点击时无效

Question

我希望有一个span内容可编辑，所以我已经将contentEditable ="true"属性添加到span元素，但只有当我使用键盘键入字段时它才可编辑，但如果我用鼠标光标单击文本则不可编辑。我以为可能有一些事件监听器做了一些时髦的事情，所以我做了一个讨厌的黑客来覆盖onclick和onfocus事件什么也不做，而不是传播给祖先事件监听器

<span 
    onclick="javascript:return false;" 
    onfocus="javascript:return false;"  
    contentEditable ="true">Edit Me</span>

作为一个不工作的例子，标题Gold Coast Waters 3 Day Forecast应该可以编辑在下面的页面：Non-Working Example

contenteditable下面的小提琴是有效的，所以我的代码中有一些东西阻止了它的工作，我似乎无法缩小它的范围。

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <span contenteditable="true">Hello World</span>
  <button>Change color</button>
</div>

当我点击span时，有什么阻止编辑的想法？

Answer 1

事实证明，$(".sortable").disableSelection()有点讨厌，并且可以通过contenteditable="true"阻止元素进行编辑。我从代码中删除了该行，现在可以编辑元素。

此外，jQuery不鼓励使用该函数：http://api.jqueryui.com/disableselection/