event.type屬性,阻止事件默認行為

var btn = document.getElementById("btn");
    var handler = function(event){
        switch(event.type){
            case 'click':
            alert("clicked");
            break;
            case "mouseover":
            event.target.style.backgroundColor = "red";
            break;
            case "mouseout":
            event.target.style.backgroundColor = "";
            break;
        }
    };
    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

這里通過檢測event.type屬性,讓函數能夠確定發生了什么事件,并執行相應的操作。

要阻止特定事件的默認行為,可以使用preventDefault()方法。例如,鏈接的默認行為就是在被單擊的時候回導航到其href特性指定的URL。如果你想阻止鏈接導航這一默認行為,那么通過鏈接的onclick時間處理程序可以取消它,如下面的例子所示。

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
}

只有cancelable屬性設置為true的時間,才可以使用preventDefault()來取消其默認行為。

returnValue屬性相當于DOM中的preventDefault()方法,他們的作用都是取消給定時間的默認行為。只要將returnValue設置為false,就可以阻止默認行為。來看下面的例子。

var link = document.getElementById("myLink");
link.onclick = function(){
      window.event.returnValue = false;
}

這個例子在onclick事件處理程序中使用returnValue達到了阻止鏈接默認行為的目的。與DOM不同的是,在此沒有辦法確定事件是否能被取消。

另外stopPropagation()方法用于立即停止時間在DOM層次中的傳播,即取消進一步的時間的捕獲或冒泡。例如,直接添加到一個按鈕的事件處理程序可以調用stopPropagation(),從而避免觸發注冊在document.body上面的事件處理程序,如下面的例子所示。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
      alert("Clicked");
      event.stopPropagation();
}
document.body.onclick = function(event){
      alert("Body Clicked");
}

對于這個例子而言,如果不調用stopPropagation(),就會在單擊按鈕時出現兩個警告框。可是由于click事件根本不會傳播到document.body,因此就不會觸發注冊在這個元素上oncick事件處理程序。
cancelBubble屬性與DOM中的stopPropagation()方法作用相同,都是用來停止事假冒泡的。由于IE不支持事件捕獲,因而只能取消事件冒泡;丹stopPropagation()可以同時取消事件捕獲和冒泡。例如:

var btn = document.getElementById("myBtn");
btn.onclick = fuc=nction(){
      alert("Click");
      window.event.cancelBubble = true;
};
document.body.onclick = function(){
      alert("Body click");
}

通過在onclick事件處理程序中將cancelBubble設置為true,就可以阻止事件通過冒泡而觸發document.body中注冊的事件處理程序。結果,在單擊按鈕之后,只會顯示一個警示框。

注意: 只有在時間處理程序執行期間,event對象才會存在,一旦事件處理程序執行完成,event對象就會被銷毀。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容