Question

在示例中，有一个标有＆＃34; tab＆＃34;的按钮。当我点击它时，它的边框颜色不会像它被禁用那样改变，但事实并非如此。我知道这是因为e.preventDefault（）;但如果我删除它我的功能停止。有没有解决的办法？这种情况只发生在Firefox中。

<div class="wrapper">
 <input type="button" class="tab"  value="Tab"/>
 <input type="text"   class="ans1"  style="border-color:black">
 <div class="def1"><i>Hundreds</i></div>
 <input type="text"  class="ans2" style="border-color:black">
 <div class="def2"><i>Tens</i></div>
 <input type="text"  class="ans3" style="border-color:#000;">
 <div class="def3"><i>Ones </i><b style="margin-left:30px;"></b> </div>
 <input type="text"  class="ans4" style="border-color:#000;">
 <input type="button"  class="num" id="one" value="1" />
 <input type="button" class="num" id="two" value="2" />
 <input type="button"  class="num" id="three" value="3" />
 <input type="button" class="num" id="four" value="4" />
 <input type="button" class="num" id="five" value="5" />
 <input type="button" class="num" id="six" value="6" />
 <input type="button" class="num" id="seven" value="7" />
 <input type="button" class="num" id="eight" value="8" />
 <input type="button" class="num" id="nine" value="9" />
 <input type="button" class="num" id="zero" value="0" />
 <input type="button" class="clear" value="Clear"/>
 <input type="button" class="delete"  value="Back"/>
 <input type="button" class="tab"  value="Tab"/>
</div>

Answer 1

我猜这是因为与其他浏览器供应商相比，Mozilla对preventDefault应该预防多少默认行为有不同的看法。

那就是说，我可能会在mousedown上为按钮添加一个类，然后在mouseup上再次删除它。

Answer 2

我认为这是firefox的问题。

您可以像下面这样使用JQuery来显示效果：

$('.tab').on('mousedown', function (e) {
    $(this).css("border","1px solid black");
    e.preventDefault();
});

$('.tab').on('mouseup', function (e) {
    $(this).css("border","none");
});

点击此处Fiddle。

Answer 3

问题是Firefox在处理mousedown事件时没有显示Button点击动画。您可以使用click事件并通过向输入字段添加类并在单击事件时将其移动到下一个元素来保持当前选项卡。

$('.tab').on('click', function (e) {
e.preventDefault();
var inFocus = $('.current').removeClass('current');
if (inFocus.length) {
    var focusIndex = focusAbles.index(inFocus);
    if (focusIndex + 1 < focusAbles.length) {
        focusAbles.eq(focusIndex + 1).focus().addClass('current');

    } else {
        focusAbles.eq(0).focus().addClass('current');
    };
} else {
    focusAbles.eq(0).focus().addClass('current');
};

}）;

更新了fiddle。

Answer 4

无需输入元素的CSS样式

<强> JQUERY：

$( "input.inputAns" ).css({"border":"1px solid #b8b8b8"});
var focusAbles = $('.wrapper').find('input[type=text]');
$('.tab').on('mousedown', function (e) {
    e.preventDefault();

    $( "input.inputAns" ).focus(function(e) {
        e.preventDefault();
        $(this).css({"border":"1px solid #323232"});
        });
    $( "input.inputAns" ).focusout(function(e) {

        $(this).css({"border":"1px solid #b8b8b8"});
       e.preventDefault();
    });
    var inFocus = $(':focus');
    if (inFocus.length) {
        var focusIndex = focusAbles.index(inFocus);
        if (focusIndex + 1 < focusAbles.length) {
            focusAbles.eq(focusIndex + 1).focus();

        } else {
            focusAbles.eq(0).focus();
        };
    } else {
        focusAbles.eq(0).focus();
    };
});

<强> HTML：

<div class="wrapper">
<input type="button" class="tab"  value="Tab"/>

<input type="text"   class="ans1 inputAns"  style="border-color:black">
<div class="def1"><i>Hundreds</i></div>
<input type="text"  class="ans2 inputAns" style="border-color:black">
<div class="def2"><i>Tens</i></div>
<input type="text"  class="ans3 inputAns" style="border-color:#000;">
<div class="def3"><i>Ones </i><b style="margin-left:30px;"></b> </div>
<input type="text"  class="ans4 inputAns" style="border-color:#000;">

    <input type="button"  class="num" id="one" value="1" />
                        <input type="button" class="num" id="two" value="2" />
                        <input type="button"  class="num" id="three" value="3" />
                        <input type="button" class="num" id="four" value="4" />
                         <input type="button" class="num" id="five" value="5" />
                          <input type="button" class="num" id="six" value="6" />
                          <input type="button" class="num" id="seven" value="7" />
                          <input type="button" class="num" id="eight" value="8" />
                          <input type="button" class="num" id="nine" value="9" />
                          <input type="button" class="num" id="zero" value="0" />
                          <input type="button" class="clear" value="Clear"/>
                          <input type="button" class="delete"  value="Back"/>

                          <input type="button" class="tab"  value="Tab"/>
    </div>

小提琴：http://jsfiddle.net/t4ce2jtu/39/

e.preventDefault（）导致错误

4 个答案: