javascript - 无法在 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

return false在mousedown防止按下鼠标按钮执行默认操作，即使子项获得焦点 <input> .

您可以测试event.target在 mousedown函数来查看它是否是 <input>元素，如果是这样，请停止尝试处理它(立即 return 或 return true)。

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