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（）導致錯誤

回答

相關問題