当父元素可拖动时如何允许文本框插入符号位置（在鼠标单击时）

Posted 2023-05-08

【中文标题】当父元素可拖动时如何允许文本框插入符号位置（在鼠标单击时）

【英文标题】：How to allow textbox caret positioning (via mouseclick) when parent element is draggable

【发布时间】：2014-06-18 06:55:58

【问题描述】：

参考。 http://jsfiddle.net/a4LJv/2/

在 IE/Firefox 中，父元素的可拖动属性等于 true 可防止通过鼠标单击手动定位文本框插入符号（键盘箭头可以正常工作）。 Chrome 不会出现这种行为。我很好奇以前的浏览器是否有正确的实现，或者这是否是意外行为。另外，我目前的解决方法是禁用 mousedown 上的可拖动属性并在 mouseup 上重新启用。

【问题讨论】：

来自developer.mozilla.org/en-US/docs/Web/html/… "默认情况下，只能拖动文本选择、图像和链接。对于所有其他元素，必须设置事件 ondragstart 才能使拖放机制起作用，如这个综合示例所示。”也许不支持 li 上的 draggable 属性？

@kendaleiv 这些元素具有专属的默认支持。任何其他元素都是可拖动的，但需要属性和事件处理程序才能执行某些操作。

【参考方案1】：

第二种解决方法是直接从textarea 中删除drag 事件，如下所示：

$('textarea').on('dragstart', function(event)
    event.preventDefault();
);

没有 IE 可以测试，但它适用于 FF。

【讨论】：

这只是防止在文本区域中拖动选定的文本。但是，问题不在于文本区域上与拖动相关的事件。具有拖动事件的父元素的文本区域是导致文本插入符号问题的原因。

我给了你赏金，因为你至少试图回答。勇敢地享受 20% 的奖励。