无法在 html 文本字段中输入文本

Question

我有一个脚本，使我能够在 div 中拖动一些内容。

但是因为您可以四处拖动，所以无论您将光标放在 div 中的哪个位置，我都无法在文本字段中输入一些文本。

可以允许吗？

我可以轻松单击 div 容器中的链接。但不能在 html 输入字段中输入文本。

这是 javascript：

$(document).ready(function () {

$('#roadmap').mousedown(function (event) {
    $(this)
    .data('down', true)
    .data('x', event.clientX)
    .data('scrollLeft', this.scrollLeft);

    return false;
}).mouseup(function (event) {
    $(this).data('down', false);
}).mousemove(function (event) {
    if ($(this).data('down') == true) {
        this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
}).mousewheel(function (event, delta) {
    this.scrollLeft -= (delta * 30);
}).css({
    'overflow': 'hidden',
    'cursor': 'col-resize'
});
});
$(window).mouseout(function (event) {
    if ($('#roadmap').data('down')) {
        try {
            if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                $('#roadmap').data('down', false);
            }
        } catch (e) { }
    }
});

这是我的扩展鼠标滚轮功能（如果需要）

(function ($) {

    $.event.special.mousewheel = {
        setup: function () {
            var handler = $.event.special.mousewheel.handler;

            // Fix pageX, pageY, clientX and clientY for mozilla
            if ($.browser.mozilla)
                $(this).bind('mousemove.mousewheel', function (event) {
                    $.data(this, 'mwcursorposdata', {
                        pageX: event.pageX,
                        pageY: event.pageY,
                        clientX: event.clientX,
                        clientY: event.clientY
                    });
                });

            if (this.addEventListener)
                this.addEventListener(($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
            else
                this.onmousewheel = handler;
        },

        teardown: function () {
            var handler = $.event.special.mousewheel.handler;

            $(this).unbind('mousemove.mousewheel');

            if (this.removeEventListener)
                this.removeEventListener(($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
            else
                this.onmousewheel = function () { };

            $.removeData(this, 'mwcursorposdata');
        },

        handler: function (event) {
            var args = Array.prototype.slice.call(arguments, 1);

            event = $.event.fix(event || window.event);
            // Get correct pageX, pageY, clientX and clientY for mozilla
            $.extend(event, $.data(this, 'mwcursorposdata') || {});
            var delta = 0, returnValue = true;

            if (event.wheelDelta) delta = event.wheelDelta / 120;
            if (event.detail) delta = -event.detail / 3;
            if ($.browser.opera) delta = -event.wheelDelta;

            event.data = event.data || {};
            event.type = "mousewheel";

            // Add delta to the front of the arguments
            args.unshift(delta);
            // Add event to the front of the arguments
            args.unshift(event);

            return $.event.handle.apply(this, args);
        }
    };

    $.fn.extend({
        mousewheel: function (fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },

        unmousewheel: function (fn) {
            return this.unbind("mousewheel", fn);
        }
    });

})(jQuery);

这是 HTML

<div id="roadmap">
       <ul>
           <li class="roadmap_description">
             <h2>Welcome</h2>
             <p>Description</p>
           </li>
           <li><h3 class="milestone_name">v. 1.0.2.3</h3>
               <ul>
                    <li class="milestone_item"><a href="#">Title description</a></li>
               </ul>
                <div class="milestone_item_add">
                     <input class="field" name="milestone_item_name" type="text" /><a href="#"><img src="/Intranet/admin/Intranet/css/images/icons/wand.png" alt="Add new" /></a>
                </div>
           </li>
</ul>
    </div>

谢谢。

Answer 1

mousedown 中的 return false 阻止按下鼠标按钮执行其默认操作，即聚焦子。

您可以在 mousedown 函数中测试 event.target 来查看它是否是 元素，如果是，则停止尝试处理它（立即返回或返回true）。

如果您希望当鼠标位于 时仍允许拖动元素，您仍然可以 return false 但手动调用 focus() 在 mousedown 中的输入上。这样做的缺点是用户无法像输入通常允许的那样使用拖动来选择部分文本。

Answer 2

为什么不将鼠标悬停事件添加到设置此的文本字段： $(this).data('down', false); ？