Contenteditable div-按鈕單擊事件與其他元素單擊事件有何不同？
[英]Contenteditable div - How the button click event differs from other elements click events?
問題描述
我試圖通過單擊其他元素在內容可編輯div中的當前光標位置插入文本。 如果我單擊按鈕，但不能與其他任何元素一起使用，這將非常完美。 我的意思是，對於按鈕，它將插入光標位置，但是對於任何其他元素單擊，它總是添加div的開始位置。 下面是一個示例，其中包含Button單擊和DIV click（不適用於任何其他標簽）。 這兩次點擊之間有什么區別嗎？ 如何使DIV完全像單擊按鈕一樣單擊。 請注意，我沒有使用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>
1 個解決方案
解決方案1
2 已采納 2018-11-14 02:12:27
與許多其他元素不同，按鈕不會將注意力集中在單擊上。 當您在函數中依賴焦點時，成功的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>
插入到 contentEditable DIV 的按鈕上的單擊事件不起作用
[英]Click event on an inserted button to a contentEditable DIV doesn't work
jQuery單擊不適用於contenteditable div中的按鈕
[英]jQuery click not working on button inside contenteditable div
如何使用contentEditable = true正確捕獲div上的右鍵單擊事件？
[英]How do I properly capture the right click event on a div with contentEditable=true?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.