Javascript 表单字段不可点击

Question

我有这个代码http://jsfiddle.net/xNHKP/6/ (由于某种我不明白的原因无法在 fiddle 中工作，但它可以在我的网站上工作 - http://bit.ly/JV5I0Z)

我想要的是可以拖动联系表单(单击最后一个菜单项以使其显示)，但是当有人拖动或单击文本字段时，他们不会获得焦点，因此您无法输入它们。讽刺的是，它可以在 Internet Explorer 上运行。

那么如何让字段在单击时获得焦点？我不介意让它们不可拖动。

谢谢

编辑:下面的代码(尽量保持简单，仅包括相关内容)

dragDrop = {
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
draggedObject: undefined,

initElement: function (element) {
    if (typeof element == 'string')
        element = document.getElementById(element);
    element.onmousedown = dragDrop.startDragMouse;
}}

<form id="contactForm" onSubmit="return sendMail();">
  <textarea id="message" rows="8"></textarea>
</form>

<script type="text/javascript">
  dragDrop.initElement(document.getElementById('contactForm'));
</script>

Answer 1

好吧，看来您正在为此苦苦挣扎，考虑到您想要什么，我会这样做:

• 向您的表单添加事件监听器，使其不冒泡，这样如果您单击内部元素，它就不会触发。
• 让每个内部元素像往常一样生活，不要试图在它们上面添加困惑的事件。

如果您确实希望/需要用户能够通过拖动标签或其他内容来拖动表单，您应该明确过滤可拖动元素。然后您可以返回冒泡事件并过滤掉不可拖动的内容。如果它不可拖动，则除了返回之外不要执行任何其他操作，这样您就不会在文本选择方面遇到问题。

Here's a fiddle