dom-events 相关问题

我长期以来一直在寻找这个问题的解决方案，所以我现在要在这里问。从普通的 contenteditable div 元素开始，如下所示：编辑此... 我长期以来一直在努力寻找这个问题的解决方案，所以我现在要在这里问。从普通的可内容编辑的 div 元素开始，如下所示： <div contenteditable>Edit this text</div> 如果单击文本，您将可以将光标放在单击的位置进行编辑。现在，我不希望文本在第一次单击时可编辑，并且我根本不希望在元素未聚焦时能够与文本进行交互。我可以通过禁用 div、使用 CSS 或覆盖元素将内容编辑为可编辑来实现此目的。我现在希望该元素再次可编辑双击时，其行为与正常单击该元素所期望的行为完全相同。让我们使用 JavaScript 和 EventListener 来实现 onmousedown 或 ondblclick。示例1 <div id="wrapper"> <div id="overlay"></div> <div id="editable" contenteditable>Edit this text</div> </div> overlay.ondblclick = () => { overlay.style.display = 'none'; editable.focus(); }; // use onblur to restore the overlay 这可行，但光标将位于元素的开头。如果您不使用 focus()，则必须第三次单击才能聚焦该元素。示例2 <div id="editable" contenteditable="false">Edit this text</div> editable.ondblclick = () => { editable.setAttribute('contenteditable', true); }; // use onblur to set contenteditable to false again // additional CSS will prevent being able to interact with the text if not focused 这可行，但您将选择要单击的单词，而不是将文本光标放在那里。这是一个私人项目，可访问性、兼容性等并不重要。经过几个小时的研究，我得出了这个解决方案： const editable = document.getElementById('editable'); editable.ondblclick = (event) => { if (document.activeElement === event.target) return; editable.setAttribute('contenteditable', true); selectRange(getMouseEventCaretRange(event)); } function getMouseEventCaretRange(event) { if (event.rangeOffset !== undefined) { // The new fancy Firefox-only way that doesn't even have documentation let range = document.createRange(); range.setStart(event.rangeParent, event.rangeOffset); range.collapse(true); return range; } else if (document.caretPositionFromPoint) { // The 'official' way (only used by Firefox) that doesn't even position the cursor correctly // VSC keeps telling me the method doesn't exist let pos = document.caretPositionFromPoint(event.clientX, event.clientY); let range = document.createRange(); range.setStart(pos.offsetNode, pos.offsetX); range.collapse(true); return range; } else if (document.caretRangeFromPoint) { // The 'deprecated WebKit-proprietary fallback method' (used by every mf browser out there) return document.caretRangeFromPoint(event.clientX, event.clientY); } } function selectRange(range) { const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } * { font-family: monospace; } #editable { font-size: 1.5rem; } #editable[contenteditable="false"] { user-select: none; cursor: pointer; } #editable[contenteditable="false"]::selection { background-color: transparent; } <div id="editable" contenteditable="false" onblur="this.setAttribute('contenteditable', false);">Double click to edit this text</div> <ul> <li>Caret is placed where clicked, not at the start</li> <li>Double clicked word is not highlighted</li> <li>Text can not be interacted with if the element isn't focused</li> </ul> 它又长又复杂，但很有效。在我看来，这个 API 完全混乱了。我希望这可以帮助将来的人。不需要任何复杂的事情，只需在添加可编辑内容时防止双击操作，同时确保其处于焦点即可。 document.addEventListener('mousedown', (event) => { if (event.detail > 1) { // double-clicked const e = event.target; if (e.id === "content" && !e.contenteditable) { e.contentEditable = true; event.preventDefault(); e.focus(); } } }, false); <div id="content">Edit this text</div>

javascript html css dom-events contenteditable

回答 2 投票 0

父级和子级 div 上的事件处理程序

这是我的 HTML 文件 document.querySelector('.a').onclick = ()=>{ 做...</desc> <question vote="1"> <p>这是我的 HTML 文件</p> <pre><code><div class="a"> <div class="b"> </div> </div> <script> document.querySelector('.a').onclick = ()=>{ document.querySelector('.a').style.backgroundColor ='black' } document.querySelector('.b').onclick = ()=>{ document.querySelector('.b').style.backgroundColor ='violet' } </script> </code></pre> <p>当我单击类为“b”的 div 时，类为“a”的 div 上的事件处理程序也会被调用。我只想调用带有“b”类事件处理程序的 div。有人可以帮忙吗？</p> </question> <answer tick="true" vote="3"> <p>这就是<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture" rel="nofollow noreferrer">事件冒泡</a>，这意味着每个事件不仅会在目标元素上触发，还会在其祖先元素上触发。</p> <p>要防止这种行为，您可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" rel="nofollow noreferrer">Event.stopPropagation</a> 来阻止事件传播到目标元素的祖先元素。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.querySelector('.a').onclick = () => { document.querySelector('.a').style.backgroundColor = 'black' } document.querySelector('.b').onclick = (event) => { event.stopPropagation(); document.querySelector('.b').style.backgroundColor = 'violet' }</code></pre> <pre><code>div { width: 100px; height: 100px; } .a { padding: 40px; background: red; } .b { background: blue; }</code></pre> <pre><code><div class="a"> a <div class="b">b</div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>JS中有一个概念叫<a href="https://javascript.info/bubbling-and-capturing#bubbling" rel="nofollow noreferrer">事件冒泡</a>。默认情况下，特定元素上发生的任何事件都将传播到父级及其父级，依此类推，直到事件到达文档。</p> <p>为了阻止这种行为，<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" rel="nofollow noreferrer"><pre><code>Event.stopPropagation</code></pre></a>将前来救援并停止向家长传播该事件。</p> <p>因此，在这种情况下，在具有类 <pre><code>e.stopPropagation</code></pre> 的 div 的 <pre><code>onclick</code></pre> 处理程序中调用 <pre><code>b</code></pre>，即内部 div 将停止将事件传播到父 div。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.querySelector('.a').onclick = (e) => { document.querySelector('.a').style.backgroundColor = 'black' } document.querySelector('.b').onclick = (e) => { e.stopPropagation(); document.querySelector('.b').style.backgroundColor = 'violet' }</code></pre> <pre><code>.b { width: 50%; }</code></pre> <pre><code><div class="a"> <div class="b"> Dummy </div> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>试试这个：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> document.querySelector('.a').onclick = ()=>{ document.querySelector('.a').style.backgroundColor ='black' } document.querySelector('.b').onclick = (e) => { e.stopImmediatePropagation(); document.querySelector('.b').style.backgroundColor ='violet' }</code></pre> <pre><code><div class="a">a <br/> <div class="b"> Click here! </div> </div></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript event-handling dom-events event-bubbling

回答 0 投票 0

使用JavaScript触发点击事件[重复]

我想使用javaScript触发点击事件。我已经使用 jQuery 完成了这样的操作： $('button[type="submit"]').trigger('点击'):

javascript triggers click dom-events

回答 3 投票 0

dom-events 相关问题

最新问题