e.preventDefault（）导致错误

在这个例子中，当我点击它时，有一个标签为“tab”的按钮，它的边框颜色不会改变，就好像它被禁用，但不是。我知道这是因为e.preventDefault（）;但如果我删除它，我的功能就会停止。有没有解决的办法？这只发生在Firefox中。e.preventDefault（）导致错误

<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>

来源

2015-02-10 NITISH DHAWAN

小提琴是http：// jsfiddl e.net/t4ce2jtu/19/ – 2015-02-10 11:17:24

伙计这是problrm帮助我的小提琴 – 2015-02-10 11:18:14

你不能添加“$（this）.css（”border“，”1px solid red“）;”在e.preventDefault（）之前; – Aru 2015-02-10 11:24:41

我认为这是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这里。

来源

2015-02-10 11:29:07 ketan

是的，我们必须把印第安jugaad放进去：p – 2015-02-10 11:31:05

不工作。 – Tushar 2015-02-10 11:33:40

：D可以。但希望解决所需要的问题。 – ketan 2015-02-10 11:33:48

我在猜测这是由于Mozilla对于preventDefault应该阻止多少默认行为与其他浏览器供应商有所不同。

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

来源

2015-02-10 11:27:39

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

$('.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。

来源

2015-02-10 11:38:26

无需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/

来源

2015-02-10 11:43:06 rJ7

e.preventDefault（）导致错误

回答

相关问题