Question

我尝试使用keydown事件在字段集内移动控件，但是在Firefox中向上或向下移动控件1px会导致每次按向上或向下键时都会大幅跳转。

我使用jQuery来获取控件的位置，它似乎在位置对象的Top属性中添加18或20像素。在Chrome和IE10中，jQuery方法似乎有效。

所以我尝试了普通的JavaScript，但这看起来更糟，我在Firefox和Chrome中遇到了同样的问题。

第一个JSFiddle使用jQuery。第二种是使用普通的JavaScript。

<code>
html:
<label id='Lbl_Position'></label>

<fieldset id='MyFieldSet' style='border: 1px solid black; position:absolute;top:30px; left:30px; width:300px; height: 100px;'>
    <legend>blablablabla</legend>
    <label id='MyLabel'>Some Label</label>
</fieldset>

js:
$(document).ready(function ()
{
    $("#MyFieldSet").resizable();
    $("#MyLabel").css({"position": "absolute", "top": " 20px"});
   $(document)
    .keydown(function (event)
    {
        var $SelectedControl = $("#MyLabel");
        $("#Lbl_Position").text($SelectedControl.position().top);

        if (event.which == '40') // down
        {
            var Top = $SelectedControl.position().top + 1;

            $SelectedControl.css({"top": Top + "px"});
        }
        else if (event.which == '38') // up
        {
            var Top = $SelectedControl.position().top - 1;

            $SelectedControl.css({ "top": Top + "px" });
        }
    });

});

我添加了可调整大小，以便尽可能接近我的实际工作。我错过了什么吗？任何人都有任何想法如何使这个工作？

Answer 1

而不是使用position()尝试使用css()，它适用于我

$(document).ready(function ()
{
    $("#MyFieldSet").resizable();
    $(document).keydown(function(event)
    {
       var pos=parseInt($("#MyLabel").css("top"));

        if (event.which == '40') // down
        {   pos=pos+1;
        }else if (event.which == '38') // up
        {   pos=pos-1;
        }
        $("#Lbl_Position").text(pos);
        $("#MyLabel").css({"top":pos + "px"});
    });

});

demo

Firefox Fieldset中的HTML Fieldset不正确JQuery.position

1 个答案: