时间戳

首页 > 解决方案 > Contenteditable div - 按钮点击事件与其他元素点击事件有何不同？

javascript - Contenteditable div - 按钮点击事件与其他元素点击事件有何不同？

问题描述

我正在尝试通过单击其他一些元素在内容可编辑 div 中的当前光标位置插入文本。如果我单击按钮，这非常有效，但不能与任何其他元素一起使用。我的意思是它在光标位置插入的按钮，但对于任何其他元素单击它总是添加 div 的起始位置。下面是一个示例，其中包括按钮单击和 DIV 单击（它不适用于任何其他标签）。这两次点击有什么区别吗？如何让 DIV click 与 button click 完全一样。请注意我没有使用 JQUERY（但如果有任何 VUEJS 解决方案我很好）。谢谢你 。

这是 jsfiddle 链接http://jsfiddle.net/jwvha/2727/

function insertTextAtCursor(text) {
  document.getElementById('pre').focus();
  var sel, range, html;
  sel = window.getSelection();
  range = sel.getRangeAt(0);
  range.deleteContents();
  var textNode = document.createTextNode(text);
  range.insertNode(textNode);
  range.setStartAfter(textNode);
  sel.removeAllRanges();
  sel.addRange(range);
}
body {
  background-color: #CCC;
}

div {
  border: 1px #000 solid;
  background-color: #FFF;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  vertical-align: center;
  padding: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Editor</title>
</head>

<body>
  <div contenteditable id="pre">
    Update text Here . This is contenteditable div
  </div>
  <div>
    <input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
  </div>
  <div onClick="insertTextAtCursor('TEXT')">
    <b>Click here to insert in the above  contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
  </div>
</body>

</html>

标签： javascripthtmlcssvue.js

解决方案

与许多其他元素不同，按钮不会在点击时获得焦点。当您在函数中依赖焦点时，在一个成功的click事件（由mouseup+组成mousedown）使 DOM 树冒泡之后，您的焦点首先被设置在 div 上。您可以通过侦听 mousedown 事件并调用event.preventDefault()或在触发之前简单地触发您的函数来避免这种click情况，即onmousedown.

这是另一个帖子的答案，它很好地解释了一切。

var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());

function insertTextAtCursor(text) {
  document.getElementById('pre').focus();
  var sel, range, html;
  sel = window.getSelection();
  range = sel.getRangeAt(0);
  range.deleteContents();
  var textNode = document.createTextNode(text);
  range.insertNode(textNode);
  range.setStartAfter(textNode);
  sel.removeAllRanges();
  sel.addRange(range);
}
body {
  background-color: #CCC;
}

div {
  border: 1px #000 solid;
  background-color: #FFF;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  vertical-align: center;
  padding: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Editor</title>
</head>

<body>
  <div contenteditable id="pre">
    Update text Here . This is contenteditable div
  </div>
  <div>
    <input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
  </div>
  <div onClick="insertTextAtCursor('TEXT')" id="prevented">
    <b>Click here to insert in the above  contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
  </div>
</body>

</html>

推荐阅读