JQuery 阻止默認行爲

問題及效果:
什麼是默認行爲?
如:a 標籤的點擊跳轉、submit按鈕的點擊提交、選中文本的拖拽搜索等等……
有時我只是需要a標籤的樣式並不希望有點擊跳轉的效果;
用戶填寫完表單時,表單內容也會在前臺JS中進行驗證,內容不合法,數據也不能提交;
因此,在某些時候,我們需要阻止標籤元素的默認行爲;
案例代碼:
<body>
    <a href="http://www.qq.com" id="tx">騰訊鏈接</a> <br>
    <hr>
    <form action="05-8-2.php" method="get">
        用戶名:<input type="text" name="names" value="" id="names"><br>
        <input type="submit" value="提交" id="sub">
    </form>
</body>
<script>
    $('#tx').click(function(){
        alert(1);
    })
    $('#sub').click(function(){
        if($('#names').val()==''){
            alert('用戶名不能爲空');
        }
    })
</script>

修改上述代碼的JS部分,阻止元素默認行爲
<script>
    $('#tx').click(function(ev){
        alert(1);
        ev.preventDefault();
    })
    $('#sub').click(function(ev){
        if($('#names').val()==''){
            alert('用戶名不能爲空');
            ev.preventDefault();
        }
    })
</script>
知識點:
event.preventDefault()
阻止默認事件行爲的觸發。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章